有趣的css - 两个圆形加载效果

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一款小清新的加载动画，适用于 app 列表加载，页面加载或者弹层内容延迟加载等场景。

最新文章通过公众号「设计师工作日常」发布。

整体效果

知识点：
1️⃣ :nth-child 选择器
2️⃣ 混合模式 mix-blend-mode
3️⃣ filter 滤镜
4️⃣ animation 动画

思路：创建两个圆形，调整混合模式，开启滤镜，然后设置动画属性让两个圆形移动起来。

适用于 app 列表加载，页面加载或者弹层内容延迟加载等场景。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="loading64"><div class="circle64"></div><div class="circle64"></div>
</div>

整体一个 div 标签包裹，然后两个子 div 作为两个圆形元素。

css 部分代码

.loading64{width: 100px;height: 60px;position: relative;display: flex;justify-content: center;align-items: center;
}
.circle64{width: 24px;height: 24px;border-radius: 50%;position: absolute;animation: eff64 2s ease-in-out infinite;mix-blend-mode: darken;   /*混合模式*/filter: blur(2px);  /*模糊滤镜*/
}
.circle64:nth-child(1){background-color: #00FFFF;
}
.circle64:nth-child(2) {background-color: #FFFF00;animation-delay: 1s;
}
@keyframes eff64{0%, 50%, 100% {transform: translateX(0)}25% {transform: translateX(70%)}75% {transform: translateX(-70%)}
}

1、定义加载整体 .loading64 的基本样式，设置 display: flex 布局，让子元素平行垂直居中。

2、子标签圆形元素 .circle64 ，定义其样式大小，设置 animation 动画，并且开启混合模式 mix-blend-mode，增加模糊滤镜 filter: blur(...) 。

3、通过 :nth-child 选择器，分别给两个圆形设置不同的背景颜色，并且给第二个圆形元素设置动画延迟播放 animation-delay: 1s，让第二个圆形元素动画延迟 1 秒播放。

4、给第 2 步中的 animation 动画增加关键帧，让两个圆形元素在合并、分开时有停顿感，增强整个加载的运动感。

提示： 混合模式 mix-blend-mode 有多个值，感兴趣的可以试试其它值，如果同时使用多个值，可以使用英文逗号隔开。

mix-blend-mode: normal;  /* 默认值 */
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;  /* 本文中使用的 darken 值， */
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>两个圆形加载效果</title></head><body><div class="app"><div class="loading64"><div class="circle64"></div><div class="circle64"></div></div></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.loading64{width: 100px;height: 60px;position: relative;display: flex;justify-content: center;align-items: center;
}
.circle64{width: 24px;height: 24px;border-radius: 50%;position: absolute;animation: eff64 2s ease-in-out infinite;mix-blend-mode: darken;filter: blur(2px);
}
.circle64:nth-child(1){background-color: #00FFFF;
}
.circle64:nth-child(2) {background-color: #FFFF00;animation-delay: 1s;
}
@keyframes eff64{0%, 50%, 100% {transform: translateX(0)}25% {transform: translateX(70%)}75% {transform: translateX(-70%)}
}