前端特效之“我又晕了”

前言

在去年十月份的时候，实现了一个类似于蚊香或者说是金钟罩一样的加载效果，不少掘友评论说，看得是“真晕呐”。

这次基于这种让人直呼眩晕的效果，又给大家整个活，带来另一个不一样的眩晕式旋转图。我们直接移步下面的效果预览。

效果预览

以上就是整个效果的预览状态，是不是很炫酷。接下来就带大家来实现它。

HTML

整个效果仅仅分为两个部分，一是HTML，二是CSS，所以实现起来并不难。我们首先看到HTML部分，相关代码如下。

<div class="warp">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      ......
      以下省略15个circle类
    </div>

在这里我们创建了二十个类名为circle的div元素，也可以称为是圆形元素，这里就是我们从效果中看到的圆形线条。另外，需要多少个div元素完全自定义，可以三十个，五十个，甚至一百个，当然了，数量越多，效果会越眩晕，CSS编写的也会更多。

CSS

接着我们看到CSS部分，这一部分会比较多，相关代码如下。

  .circle {
        position: absolute;
        top: calc(50% - 25rem);
        left: calc(50% - 25rem);
        width: 50rem;
        height: 50rem;
        -webkit-animation: spin 10s infinite alternate
          cubic-bezier(0.77, 0, 0.175, 1);
        animation: spin 10s infinite alternate cubic-bezier(0.77, 0, 0.175, 1);
      }

这里是circle类的样式。设置好定位类型设置为绝对定位，使其相对于其父元素进行定位。top: calc(50% - 25rem)和left: calc(50% - 25rem)将元素的顶部和左侧边距设置为父元素的 50% 减去25rem的距离，从而使元素位于父元素的中心位置。 最后，在这里定义了名为spin的动画，持续时间为10秒，无限循环播放，并使用了一个曲线函数(cubic-bezier)来定义动画的速度变化。这个曲线函数的参数(0.77, 0, 0.175, 1)定义了一个缓入缓出的效果，使得动画在开始和结束时速度较慢，中间速度较快。 下面是这个名为spin动画实现。

@keyframes spin {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

0%表示动画开始时的样式，这里将元素的transform属性设置为rotate(0deg)，即不进行旋转。100%表示动画结束时的样式，这里将元素的transform属性设置为rotate(360deg)，即顺时针旋转360度。

在这里，通过应用spin动画到circle类元素，该元素将无限循环地以360度的速度顺时针旋转。

     .circle:nth-child(1) {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
      }
      .circle:nth-child(2) {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
      }
      .circle:nth-child(3) {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
      }
      .circle:nth-child(4) {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
      }
      .circle:nth-child(5) {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
      }
      ......
      以下省略15个circle元素

接着通过使用:nth-child选择器来选择具有特定顺序的circle元素，并为每个元素设置不同的延迟时间。比如选择第一个circle元素，并将动画延迟设置为 -0.1s；选择第二个circle元素，并将动画延迟设置为 -0.2s；选择第三个circle元素，并将动画延迟设置为 -0.3s；就这样以此类推，选择到第二十个元素，将动画延时设置为2s。

这些延迟时间将用于在应用CSS动画时依次启动每个circle元素的动画效果。通过设置不同的延迟时间，可以实现逐个或同时启动动画效果的效果。

最后，我们还需要加上伪元素，这样才算完成了整个效果。

  .circle:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 20rem;
        box-shadow: -0.25rem 0rem 0rem 0.4rem white;
      }
      .circle:nth-child(1):after {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
      .circle:nth-child(2):after {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
      }
      .circle:nth-child(3):after {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
      ......
      以下省略十余个circle元素

使用伪元素选择器 :after 来创建一个伪元素。然后，设置该伪元素的样式属性，包括宽度和高度为100%（即与父元素相同大小），边框半径为20rem（即一个很大的值，使边框看起来是圆形的），以及白色的阴影效果。

接下来，通过使用 :nth-child 伪类来依次选择第 circle 类元素，并给它们的伪元素设置不同的缩放比例。比如第一个元素的缩放比例为1，即不进行缩放；第二个元素的缩放比例为0.95，即缩小为原来的95%；第三个元素的缩放比例为0.9，即缩小为原来的90%。以此类推，一直到第二十个元素，缩放比例为0.05，即缩小为原来的5%。通过这些样式设置，可以创建出一组不同大小的圆形效果。

总结

以上就是该旋转图的实现过程了，代码比较简单，效果和之前实现过的蚊香式加载类似，但是这里是基于平面的一个旋转，没有很复杂的逻辑处理部分。最后，该效果的完整代码在码上掘金里可以查看，大家可以在此效果上继续二次扩展，如果有什么想法或者问题可以在评论区里讨论~