效果：
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: black; } .loader-cont { height: 240px; width: 240px; 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: 10px; width: 10px; background: white; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .dots:nth-child(2)>span { top: calc(10px * 1); } .dots:nth-child(3)>span { top: calc(10px * 2); } .dots:nth-child(4)>span { top: calc(10px * 3); } .dots:nth-child(5)>span { top: calc(10px * 4); } .dots:nth-child(6)>span { top: calc(10px * 5); } .dots:nth-child(7)>span { top: calc(10px * 6); } .dots:nth-child(8)>span { top: calc(10px * 7); } .dots:nth-child(9)>span { top: calc(10px * 8); } .dots:nth-child(10)>span { top: calc(10px * 9); } .dots:nth-child(11)>span { top: calc(10px * 10); } .dots:nth-child(12)>span { top: calc(10px * 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> </body> <script src='https://unpkg.co/gsap@3/dist/gsap.min.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(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven)", { rotate: "+=30" }); tl.to(".dots.dot-seven > span", { top: 0 }, "<"); tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight)", { rotate: "+=30" }); tl.to(".dots.dot-eight > span", { top: 0 }, "<"); tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine)", { rotate: "+=30" }); tl.to(".dots.dot-nine > span", { top: 0 }, "<"); tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine):not(.dot-ten)", { rotate: "+=30" }); tl.to(".dots.dot-ten > span", { top: 0 }, "<"); tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine):not(.dot-ten):not(.dot-eleven)", { rotate: "+=30" }); tl.to(".dots.dot-eleven > span", { top: 0 }, "<"); tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine):not(.dot-ten):not(.dot-eleven):not(.dot-twelve)", { rotate: "+=30" }); tl.to(".dots.dot-twelve > span", { top: 0 }, "<"); tl.to(".dots.dot-one", { rotate: "+=30" }); tl.to(".dots.dot-one > span", { top: 110 }, "<"); tl.to(".dots.dot-one, .dots.dot-two", { rotate: "+=30" }); tl.to(".dots.dot-two > span", { top: 100 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three", { rotate: "+=30" }); tl.to(".dots.dot-three > span", { top: 90 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four", { rotate: "+=30" }); tl.to(".dots.dot-four > span", { top: 80 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five", { rotate: "+=30" }); tl.to(".dots.dot-five > span", { top: 70 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six", { rotate: "+=30" }); tl.to(".dots.dot-six > span", { top: 60 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven", { rotate: "+=30" }); tl.to(".dots.dot-seven > span", { top: 50 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight", { rotate: "+=30" }); tl.to(".dots.dot-eight > span", { top: 40 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine", { rotate: "+=30" }); tl.to(".dots.dot-nine > span", { top: 30 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine, .dots.dot-ten", { rotate: "+=30" }); tl.to(".dots.dot-ten > span", { top: 20 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine, .dots.dot-ten, .dots.dot-eleven", { rotate: "+=30" }); tl.to(".dots.dot-eleven > span", { top: 10 }, "<"); tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine, .dots.dot-ten, .dots.dot-eleven, .dots.dot-twelve", { rotate: "+=30" }); tl.to(".dots.dot-twelve > span", { top: 0 }, "<"); </script> </html>
