gsap实现一个时钟点线loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:gsap实现一个时钟点线loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: black; } .loader-cont { height: 480px; width: 480px; position: relative; } .dots { height: 100%; width: 100%; border-radius: 50%; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .dots > span { content: ''; display: block; height: 20px; width: 20px; background: white; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .dots:nth-child(2) > span { top: calc(20px * 1); } .dots:nth-child(3) > span { top: calc(20px * 2); } .dots:nth-child(4) > span { top: calc(20px * 3); } .dots:nth-child(5) > span { top: calc(20px * 4); } .dots:nth-child(6) > span { top: calc(20px * 5); } .dots:nth-child(7) > span { top: calc(20px * 6); } .dots:nth-child(8) > span { top: calc(20px * 7); } .dots:nth-child(9) > span { top: calc(20px * 8); } .dots:nth-child(10) > span { top: calc(20px * 9); } .dots:nth-child(11) > span { top: calc(20px * 10); } .dots:nth-child(12) > span { top: calc(20px * 11); } </style> </head> <body> <div class="loader-cont"> <div class="dots dot-one"> <span></span> </div> <div class="dots dot-two"> <span></span> </div> <div class="dots dot-three"> <span></span> </div> <div class="dots dot-four"> <span></span> </div> <div class="dots dot-five"> <span></span> </div> <div class="dots dot-six"> <span></span> </div> <div class="dots dot-seven"> <span></span> </div> <div class="dots dot-eight"> <span></span> </div> <div class="dots dot-nine"> <span></span> </div> <div class="dots dot-ten"> <span></span> </div> <div class="dots dot-eleven"> <span></span> </div> <div class="dots dot-twelve"> <span></span> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.8.0.js"></script> <script> var tl = gsap.timeline({ defaults: { duration: 0.25, ease: "none" }, repeat: -1 }); tl.to(".dots:not(.dot-one)", { rotate: "+=30" }); tl.to(".dots:not(.dot-one):not(.dot-two)", { rotate: "+=30" }); tl.to(".dots.dot-two > span", { top: 0 }, "<"); tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three)", { rotate: "+=30" }); tl.to(".dots.dot-three > span", { top: 0 }, "<"); tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four)", { rotate: "+=30" }); tl.to(".dots.dot-four > span", { top: 0 }, "<"); tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five)", { rotate: "+=30" }); tl.to(".dots.dot-five > span", { top: 0 }, "<"); tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six)", { rotate: "+=30" }); tl.to(".dots.dot-six > span", { top: 0 }, "<"); tl.to(&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0