手把手教你实现炫酷的旋转交互圆环

前言

时隔一个月，又来给大伙展示一些新效果了。这次给大家带来一个多彩的旋转圆环，实现起来比较简单，话不多说，大家直接看到下面的效果预览。

效果预览

实现过程

首先是 HTML 部分。这里创建了一个简单的 HTML 页面，然后通过一些 CSS 样式来渲染动态的环形图案。

在 HTML 部分，页面中唯一的内容是一个具有 circle 类的 div 元素，这个元素用来展示环形的效果。

 <div class="circle"></div>

然后是 CSS 部分，相关代码如下。

  body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: black;
    }

在 CSS 部分，body 元素的样式设定为占据整个视口高度，并且采用 Flex 弹性布局在页面中央水平垂直居中显示。

 .circle {
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .circle::before,
    .circle::after {
      content: "";
      position: absolute;
    }
    .circle,
    .circle::before,
    .circle::after {
      --diameter: calc(10em - (var(--n) - 1) * 30%);
      width: var(--diameter);
      height: var(--diameter);
      border: 0.4em solid;
      border-radius: 50%;
      border-color: var(--top-color) transparent var(--bottom-color) transparent;
      animation: animate ease-in-out infinite alternate;
      animation-duration: var(--duration);
    }
    .circle {
      --n: 1;
      --top-color: red;
      --bottom-color: blue;
      --duration: 4s;
    }
    .circle::before {
      --n: 2;
      --top-color: orange;
      --bottom-color: cyan;
      --duration: 8s;
    }
    .circle::after {
      --n: 3;
      --top-color: yellow;
      --bottom-color: limegreen;
      --duration: 16s;
    }

.circle 类定义了一个用于创建环形效果的元素。在这个类中使用了 CSS 变量，用来控制不同环形的尺寸、颜色和动画时间。

.circle::before 和 .circle::after 通过伪元素实现了额外的环形效果。每个环形都有不同的尺寸、颜色和动画持续时间。

通过设置不同的变量 (--n, --top-color, --bottom-color, --duration) 来定义不同的圆环，使得每个圆环有不同的颜色和动画效果。其中，.circle 类设置了基本样式和动画效果，.circle::before 和 .circle::after 分别设置了两个额外的圆环，通过改变变量的数值来实现不同的效果。整体效果是三个圆环交替变换颜色和大小，形成一个动态的环形效果。

接下来介绍该效果中的一段动画 CSS。

  @keyframes animate {
     to {
       transform: rotate(4turn);
     }
   }

这段代码定义了一个名为 animate 的关键帧动画。在这个关键帧动画中，元素在动画结束时会旋转 4 圈，4turn 代表 360 度 * 4 等于 1440 度。在实际使用中，可以将这个关键帧动画应用到需要进行旋转动画的元素上，让元素实现旋转效果。

综上所述，这段代码利用 CSS 和 HTML 来创建了一个漂亮的环形动画效果，三个环形元素依次展示，每个环形都有自己独特的颜色、大小和动画时长。

总结

以上就是整个效果的实现过程了，代码简单易懂，另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~