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

本文链接：https://blog.csdn.net/justliu1989/article/details/139172031

大家好，我是 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%)
  }
}