【Ten Mins Effect】 - 02 波浪加载器动画效果

大家好，这里是初心Yearth，欢迎来到 10 mins css，每天花 10 分钟，实现要给简单精美的 css 效果。

那么下面我们直接进入正题，先来看看今天的效果展示吧：

分析

这个效果乍一看似乎挺复杂的，其实不然，我们将波浪分解成最小单位便不难看出，实际上需要实现的效果如下：

• 画一个半圆
• 让它摆动起来

而完整的效果只需要增加下面的变量即可：

• 半圆逐渐扩大
• 摆动之间有固定延迟
• 每个半圆颜色不同

实现

让我们先来看看一个摆动的半圆怎么实现吧。

其实很简单，先实现一个正方形，通过 border 对其进行描边：

+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ body {
+   height: 100vh;
+   width: 100vw;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   background: #000;
+ }
+ .loader {
+   width: 250px;
+   height: 250px;
+   overflow: hidden;
+   position: relative;
+ }
+ .loader span {
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   border: 10px solid #0b0b0b;
+   border-top: 10px solid #0f0;
+   border-left: 10px solid #0f0;
+ }

效果如下：

随后添加角度即可实现半圆环的效果了：

body {
   height: 250px;
   overflow: hidden;
   position: relative;
+  border-radius: 50%;
+  transform: rotate(175deg);
 }

 .loader span {
   border: 10px solid #0b0b0b;
   border-top: 10px solid #0f0;
   border-left: 10px solid #0f0;
+  border-radius: 50%;
 }

效果如下：

随后则是让这个圆环摆动起来即可：

 body {
   border-top: 10px solid #0f0;
   border-left: 10px solid #0f0;
   border-radius: 50%;
+  animation: wave 1s alternate ease-in-out infinite;
+}
+
+@keyframes wave {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
 }

效果如下：

到这里，最核心的效果已经实现了，剩下的就很简单了，这里我们可以借助 css 变量来简化过程：

-      <span></span>
+      <span style="--i: 0"></span>
+      <span style="--i: 1"></span>
+      <span style="--i: 2"></span>
+      <span style="--i: 3"></span>
+      <span style="--i: 4"></span>
+      <span style="--i: 5"></span>
+      <span style="--i: 6"></span>
+      <span style="--i: 7"></span>
+      <span style="--i: 8"></span>
+      <span style="--i: 9"></span>

.loader span {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: calc(12px * var(--i));
+  left: calc(12px * var(--i));
+  right: calc(12px * var(--i));
+  bottom: calc(12px * var(--i));
   border: 10px solid #0b0b0b;
   border-top: 10px solid #0f0;
   border-left: 10px solid #0f0;
   border-radius: 50%;
   animation: wave 1s alternate ease-in-out infinite;
}

效果如下：

到这里，还差的就只是不同圆环之间的颜色和动画的延迟了，这里我们可以借助 filter 和 animation-delay：

body {
   border-top: 10px solid #0f0;
   border-left: 10px solid #0f0;
   border-radius: 50%;
+  filter: hue-rotate(calc(60deg * var(--i)));
   animation: wave 1s alternate ease-in-out infinite;
+  animation-delay: calc(-0.1s * var(--i));
}

最终效果如下：

感兴趣的读者可以看看这个效果的在线 demo：波浪加载器动画效果