类似时钟的加载中动画

效果：

 

完整代码：

<!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>

 

posted @ 2021-12-22 16:29  herry菌  阅读(57)  评论(0)  编辑  收藏  举报