CSS实现漂亮的时钟动画效果的实例代码

我要找工作 !!!

预先准备:

首先这个动画，是根据之前的 Loading 动画 制作 的， Loading炫酷动画 , 这些的思路都是一样的，在这个动画上进行了一次 创新 。

预习知识点：

动画帧 背景渐变 VAR () 和 calc() 的使用 flex布局的场景 多个动画操作 延迟动画的使用&nbs p;

开始

核心代码分析

transform: rotate(calc(30 deg  * var(- -i )));
        transform-ori gin : 0 250px;
        animation: rotate 5s linear infin IT e;
        animation-delay: calc(0.42s * var(--i));

根据在 HT ML 上搭建的style 样式， 获取每个对应的i值， 分别计算每个时刻 盒子 的旋转度数， 同时我们更改他们的初始旋转点， 不然每个都只是中心旋转， 转成了一个 圆 形。

思路还是loading的制作思路， 只 不过 这次 尺寸 比例放大了，

HTML代码搭建：

<div class="box">
            <div class="color" style="--i:1">1</div>
            <div class="color" style="--i:2">2</div>
            <div class="color" style="--i:3">3</div>
            <div class="color" style="--i:4">4</div>
            <div class="color" style="--i:5">5</div>
            <div class="color" style="--i:6">6</div>
            <div class="color" style="--i:7">7</div>
            <div class="color" style="--i:8">8</div>
            <div class="color" style="--i:9">9</div>
            <div class="color" style="--i:10">10</div>
            <div class="color" style="--i:11">11</div>
            <div class="color" style="--i:12">12</div>
            <div class="hours"></div>
            <div class=" ;m intues"></div>
        </div>

Less代码：

* {
  m arg in: 0px;
  padding: 0px;
  box -s izing: border-box;
}

body {
  background: - webkit -linear-gra die nt(left top, pink, rgb(90, 83, 83));
  dis play : flex;
  min-h ei ght: 100vh;
  justify-content:  center ;
  align-items: center;

  section {
    height: 500px;
    width: 500px;
    .box {
      position: relative;
      height: 500px;
      width: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 5px solid  # e2adb6;
      border-radius: 50%;
      // border: 2px solid  red ;
      & am p;:hover .color {
        animation-play- stat e: paused;
      }

      &: :after  {
        content: "";
        display: block;
        height: 25px;
        width: 25px;
        background-color: #000;
        z-index: 4;
        border-radius: 50%;
      }

      @keyframes rotate {
        0%,
        50% {
          text-shadow: none;
          color: #000;
          transform: rotate(calc(30deg * var(--i))) scale(1);
        }

        50.1%,
        100% {
          text-shadow: 0 0 10px #000,
            0 0 15px #000;
          color: #fff;
          transform: rotate(calc(30deg * var(--i))) scale(1.01);
        }
      }

      .color {
        position: absolute;
        top: 0;
        color: # f2 f2f2;
        opacity: .6;
        font- Size:  20px;
        transform: rotate(calc(30deg * var(--i)));
        transform-origin: 0 250px;
        line-height: 50px;
        animation: rotate 5s linear infinite;
        animation-delay: calc(0.42s * var(--i));
      }

      @keyframes change1 {
        0% {
          transform: translateY(-50%) rotate(0deg);
          transform-origin: 0 100px;
        }

        100% {
          transform: translateY(-50%) rotate( 360 deg);
          transform-origin: 0 100px;
        }
      }

      @keyframes change2 {
        0% {
          transform: translateY(-50%) rotate(-30deg) rotate(0deg);
          transform-origin: 0 150px;
        }

        100% {
          transform: translateY(-50%) rotate(-30deg) rotate(360deg);
          transform-origin: 0 150px;
        }
      }

      .hours {
        position: absolute;
        top: 40%;
        width: 5px;
        transform: translateY(-50%);
        height: 100px;
        background-color: #f2f2f2;
        animation: change1 24s linear infinite;

        & :: after {
          content: "";
          position: absolute;
          top: 0;
          left: -10px;
          width: 20px;
          height: 20px;
          border-bottom: 5px solid #f2f2f2;
          border-right: 5px solid #f2f2f2;
          transform: rotate(-135deg);
        }
      }

      .mintues {
        position: absolute;
        top: 36%;
        width: 3px;
        height: 150px;
        background-color: #000;
        transform: translateY(-50%) rotate(-30deg);
        transform-origin: 0 150px;
        animation: change2 2s linear infinite;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: -10px;
          // display: block;
          width: 20px;
          height: 20px;
          border-bottom: 3px solid #000;
          border-right: 3px solid #000;
          transform: rotate(-135deg);
        }
      }
    }
  }
}

到此这篇关于CSS实现漂亮的时钟动画效果的实例代码的 文章 就介绍到这了,更多相关css时钟动画内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

@H_ 512 _55@

总结

以上是 为你收集整理的 CSS实现漂亮的时钟动画效果的实例代码 全部内容，希望文章能够帮你解决 CSS实现漂亮的时钟动画效果的实例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS实现漂亮的时钟动画效果的实例代码的详细内容...