gsap实现彩色方块旋转loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:gsap实现彩色方块旋转loading加载动画效果代码
代码标签: gsap 彩色 方块 旋转 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; background: rgba(0, 0, 57, 1); } .grid { display: grid; grid: 1fr 1fr / 1fr 1fr; gap: 10px; } .box { border-radius: 20%; width: 30px; height: 30px; } .box:nth-child(1) { background: radial-gradient(gold, orange); } .box:nth-child(2) { background: radial-gradient(yellow, orange); } .box:nth-child(3) { background: radial-gradient(lightgreen, green); } .box:nth-child(4) { background: radial-gradient(dodgerblue, blue); } </style> </head> <body translate="no"> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script> <script> let tl = gsap.timeline(); // orange gsap.utils.toArray(".box:nth-child(1)").forEach(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0