手把手教你实现一个不一样的循环小圆环

一条会coding的Shark
529 阅读4分钟

前言

今天是五一假期结束后的一天，在这里相信大家假期都很快乐。这次趁着假期闲下来的时间，捣鼓了一个新的小效果，用 CSS 绘制的一个循环小圆环。整个实现过程比较简单，大家可以先看到下面的效果预览部分。

效果预览

OK，接下来跟随我的脚步一步步去实现它。

HTML部分

首先我们看到 HTML 部分。这部分由多个 div 元素组成。相关代码如下。

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

<div class="loader"> 这是一个父容器，用于包裹整个加载动画。内部有两个<div class="face">元素，代表了该加载动画的两个表面或者视角。在每个<div class="face">元素内部有一个<div class="circle">元素，这是表示加载动画的圆圈。到这里 HTML 部分就结束了。

CSS部分

紧接着是 CSS 部分，相关代码如下。

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}
.loader {
  width: 20em;
  height: 20em;
  font-size: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader .face {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  animation: animate 3s linear infinite;
}

body 的样式应用在代码中极为常见，这里为 body 应用一些样式，使其充满整个视口并居中显示，背景颜色为黑色。

然后是关于 loader 的样式定义这里的 .loader 类定义了加载动画的容器，设置了宽度、高度，并将其内容进行居中显示。.loader .face 类定义了加载动画的“面”，将它们定位在父容器的中心，并设置了圆角边框，以及动画效果。

.loader .face .circle {
  position: absolute;
  width: 50%;
  height: 0.1em;
  top: 50%;
  left: 50%;
  background-color: transparent;
  transform: rotate(var(--deg));
  transform-origin: left;
}

然后开始定义加载动画的样式了。这里定义了加载动画的 circle 元素的样式，将它们放置在 “face” 元素的中心，并应用了一些旋转效果。这段代码定义了加载动画中的 "circle" 元素的样式。position: absolute;代表定位方式为绝对定位，这将使得 "circle" 相对于其最近的非 position: static 的父元素进行定位。top: 50%;表示将 "circle" 元素的顶部边缘定位到其父元素的 50% 处。left: 50%; 表示将 "circle" 元素的左侧边缘定位到其父元素的 50% 处。transform: rotate(var(--deg));表示通过 CSS 变量 --deg 控制 "circle" 元素的旋转。 transform-origin: left; 表示设置变换的原点在元素的左侧。

总的来说，这里实现了一个环形的装饰元素，通过旋转效果和transform-origin属性，使其达到作为加载动画的效果

.loader .face .circle::before {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  content: "";
  width: 1em;
  height: 1em;
  background-color: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em,
    0 0 0 0.5em rgba(255, 255, 0, 0.1);
}

接着是关于伪元素的样式设置。这一部分通过 ::before 伪元素设置了一个装饰性的环绕光晕效果。position: absolute; 表示将伪元素的定位方式设置为绝对定位。top: -0.5em; 表示将伪元素的顶部位置向上偏移 0.5em。right: -0.5em; 表示将伪元素的右侧位置向左偏移 0.5em。content: "";为伪元素设置一个空内容，这样它将生成一个空的元素，这是在设置伪元素时必填的一项。background-color: currentColor; 表示将伪元素的背景颜色设置为 currentColor，这会让它继承其父元素的文字颜色。剩下的就是关于元素的宽度高度阴影等设置了。

总的来说，这里产生了一个相对于 .circle 元素的圆形阴影，通常用来增加元素的立体感。

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

最后，这块定义了名为 animate 的关键帧动画，用于展示“加载中”时的旋转效果。

@keyframes animate 是 CSS 中用来定义关键帧动画的关键字，后面跟着动画的名称，这里是 “animate”。to 表示动画的最终状态。transform: rotate(1turn) 表示在动画的最终状态，对元素进行一次完整的旋转，即 360 度。

因此，这段代码定义了一个在动画过程中元素旋转一周的关键帧动画。

最后，以上这些 CSS 样式的组合使得 HTML 中的 .loader 元素展现出了一种金色和绿色的环绕旋转装饰效果，最终呈现出了我们想要展示的效果。

总结

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

avatar
文章
阅读
粉丝