【动画消消乐｜CSS】086.炫酷水波浪Loading过渡动画 (2)

z-index：2（比1大就行 使其文字处于最上层）

.circle::before { content: \'Loading...\'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; letter-spacing: 2px; color: #10a789; font-family: sans-serif; z-index: 2; }

效果图如下：

步骤4

利用.circle::after伪元素

设置为

绝对定位（bottom: 0; ）

宽度：100%

高度：25%

背景颜色为渐变色 linear-gradient(to top, #12c8e0, #36e9ff, #5ffbf1);

.circle::after { content: \'\'; position: absolute; width: 100%; height: 25%; bottom: 0; background-image: linear-gradient(to top, #12c8e0, #36e9ff, #5ffbf1); }

效果图如下：

步骤5

为.circle::after伪元素添加动画

使其随时间其高度逐渐增大

只需要明确两个关键帧

初始位置：height: 25%

结束位置：height: 100%

.circle::after { animation: loadingRun 5s linear infinite; } @keyframes loadingRun { 0% { height: 25%; } 100% { height: 100%; } }

效果图如下：

步骤6

对circle设置隐藏溢出

.circle { overflow: hidden; }

效果图如下：

步骤7

这里先注释circle隐藏溢出 以及 circle::after动画 便于后面单独分析

.circle { /* overflow: hidden; */ } .circle::after { /* animation: loadingRun 5s linear infinite; */ }

然后我们使用wave的两个伪元素.wave::before、.wave::afte与cirle::after产生波浪的效果

首先设置wave::before

绝对定位（left: -50%;）

宽度、高度均为200%

z-index：1

背景色：#85f7fb

border-radius: 52% 25% 62% 69%/25% 38%; 重点

.wave::before { content: \'\'; position: absolute; left: -50%; width: 200%; height: 200%; z-index: 1; background-color: #85f7fb; border-radius: 52% 25% 62% 69%/25% 38%;/*重点*/ }

效果图如下：

注：.wave::before z-index为1 大于circile(0) 小于.circle::before(2)

为.wave::before 添加动画

效果描述

自身不断旋转的同时 也不断上升

.wave::before { animation: loadingWave 5s linear infinite; } @keyframes loadingWave { 0% { top: -100%; transform: rotate(0); } 100% { top: -200%; transform: rotate(360deg); } }

效果图如下：

同理，对wave::after进行同样的设置

不同在于ç四边圆角率与before不同、颜色浅一点

border-radius: 42% 38% 40% 62%/28% 35%; background-color: #d0f4ff;

其他都一样

当wave::after、before运用同样的动画时

效果图如下：

步骤8

取消circle隐藏溢出 以及 circle::after动画

.circle { overflow: hidden; } .circle::after { animation: loadingRun 5s linear infinite; }

效果图如下：