大家好，我是 Just，这里是「设计师工作日常」，今天分享的是由4个圆组成的一个小清新的动态加载动画效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

(目录)

整体效果

通过 animation 配合 transform 实现4个圆的变化运动，形成视觉动态。

适用于各种加载、刷新等状态的场景。

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

核心代码

html 代码

<div class="loading26">
  <span class="round26"></span>
  <span class="round26"></span>
  <span class="round26"></span>
  <span class="round26"></span>
</div>

4个 div 绘制4个圆形。

css 部分代码

.loading26{
  width: 90px;
  height: 90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  animation: loading26-eff 3s linear infinite;
}
@keyframes loading26-eff{
  0%{
    transform: scale(1) rotate(0);
  }
  20%{
    transform: scale(1) rotate(72deg);
  }
  40%{
    transform: scale(0.5) rotate(144deg);
  }
  60%{
    transform: scale(0.5) rotate(216deg);
  }
  80%{
    transform: scale(1) rotate(288deg);
  }
  100%{
    transform: scale(1) rotate(360deg);
  }
}
.round26{
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 20px 20px 20px 20px;
  box-sizing: border-box;
}
.round26:nth-of-type(1){
  background-color: #50DE68;
  animation: round-eff261 3s linear infinite;
}
.round26:nth-of-type(2){
  background-color: #3DC453;
  animation: round-eff262 3s linear infinite;
}
.round26:nth-of-type(3){
  background-color: #14BE71;
  animation: round-eff263 3s linear infinite;
}
.round26:nth-of-type(4){
  background-color: #78DE35;
  animation: round-eff264 3s linear infinite;
}
@keyframes round-eff261{
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 20px 20px 0 20px;
  }
  60%{
    border-radius: 20px 20px 0 20px;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}
@keyframes round-eff262{
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 20px 20px 20px 0;
  }
  60%{
    border-radius: 20px 20px 20px 0;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}
@keyframes round-eff263{ 
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 20px 0 20px 20px;
  }
  60%{
    border-radius: 20px 0 20px 20px;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}
@keyframes round-eff264{
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 0 20px 20px 20px;
  }
  60%{
    border-radius: 0 20px 20px 20px;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}

每个圆形设置不同的 animation 参数，让每个圆形都渐渐变化成带一个角的

然后给4个圆的父元素 div 设置 animation 参数，在关键帧中设置 transform 属性，让整体旋转、放大、缩小。

完整代码如下

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="loading26">
        <span class="round26"></span>
        <span class="round26"></span>
        <span class="round26"></span>
        <span class="round26"></span>
      </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;
}
.loading26{
  width: 90px;
  height: 90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  animation: loading26-eff 3s linear infinite;
}
@keyframes loading26-eff{
  0%{
    transform: scale(1) rotate(0);
  }
  20%{
    transform: scale(1) rotate(72deg);
  }
  40%{
    transform: scale(0.5) rotate(144deg);
  }
  60%{
    transform: scale(0.5) rotate(216deg);
  }
  80%{
    transform: scale(1) rotate(288deg);
  }
  100%{
    transform: scale(1) rotate(360deg);
  }
}
.round26{
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 20px 20px 20px 20px;
  box-sizing: border-box;
}
.round26:nth-of-type(1){
  background-color: #50DE68;
  animation: round-eff261 3s linear infinite;
}
.round26:nth-of-type(2){
  background-color: #3DC453;
  animation: round-eff262 3s linear infinite;
}
.round26:nth-of-type(3){
  background-color: #14BE71;
  animation: round-eff263 3s linear infinite;
}
.round26:nth-of-type(4){
  background-color: #78DE35;
  animation: round-eff264 3s linear infinite;
}
@keyframes round-eff261{
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 20px 20px 0 20px;
  }
  60%{
    border-radius: 20px 20px 0 20px;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}
@keyframes round-eff262{
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 20px 20px 20px 0;
  }
  60%{
    border-radius: 20px 20px 20px 0;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}
@keyframes round-eff263{ 
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 20px 0 20px 20px;
  }
  60%{
    border-radius: 20px 0 20px 20px;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}
@keyframes round-eff264{
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 0 20px 20px 20px;
  }
  60%{
    border-radius: 0 20px 20px 20px;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

CSS 是一种很酷很有趣的计算机语言，在这里跟大家分享一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助，希望你们喜欢。

我是 Just，这里是「设计师工作日常」，求点赞求关注！