有趣的css - 多弧形加载动画-编程知识

有趣的css - 多弧形加载动画

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用纯css实现多双弧线加载动画。

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

整体效果

知识点：
①熟悉 :before 、 :after 伪选择器的使用
②熟悉 animation 动画属性
③通过 border 来绘制双弧线

思路：先写出主体双弧线，然后通过 :before 和 :after 来添加新的双弧线，然后设置不同的 animation 属性来让双弧线动起来。

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

核心代码

html 代码

<div class="loading42"></div>

div 标签作为主体双弧线。

css 部分代码

.loading42{width:40px;height:40px;border:6px solid rgba(0,0,0,0);border-top-color: #b12a5b;border-bottom-color: #b12a5b;border-radius:50%;position: relative;animation: eff42 1.4s linear infinite;  /*设置主体动画参数*/
}
.loading42:after{content: '';width:60px;height:60px;border:6px solid rgba(0,0,0,0);border-top-color: #ff8177;border-bottom-color: #ff8177;border-radius:50%;position: absolute;top: -16px;left: -16px;animation: inherit;animation-duration: 0.7s;  /*设置动画持续时间*/animation-direction: reverse;  /*设置动画反向*/
}
.loading42:before{content: '';width:20px;height:20px;border:6px solid rgba(0,0,0,0);border-top-color: #ff8177;border-bottom-color: #ff8177;border-radius:50%;position: absolute;top: 4px;left: 4px;animation: inherit;animation-duration: 0.7s;  /*设置动画持续时间*/animation-direction: reverse;  /*设置动画反向*/
}
@keyframes eff42{to{transform: rotate(360deg);}
}

1、页面中 div 作为主体，通过 border 属性绘制出主体双弧线，并且给它设置 animation 动画属性相关参数

2、然后基于主体双弧线通过 :before 和 :after 新增两个新的双弧线，设置不同的宽度、高度以及边框颜色，通过定位让三个双弧线居中分布

3、然后给两个伪选择器 :before 和 :after 设置动画时长( animation-duration 属性 )以及动画反向( animation-direction 属性 )。

完整代码如下

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="loading42"></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;
}
.loading42{width:40px;height:40px;border:6px solid rgba(0,0,0,0);border-top-color: #b12a5b;border-bottom-color: #b12a5b;border-radius:50%;position: relative;animation: eff42 1.4s linear infinite;
}
.loading42:after{content: '';width:60px;height:60px;border:6px solid rgba(0,0,0,0);border-top-color: #ff8177;border-bottom-color: #ff8177;border-radius:50%;position: absolute;top: -16px;left: -16px;animation: inherit;animation-duration: 0.7s;animation-direction: reverse;
}
.loading42:before{content: '';width:20px;height:20px;border:6px solid rgba(0,0,0,0);border-top-color: #ff8177;border-bottom-color: #ff8177;border-radius:50%;position: absolute;top: 4px;left: 4px;animation: inherit;animation-duration: 0.7s;animation-direction: reverse;
}
@keyframes eff42{to{transform: rotate(360deg);}
}