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

news2024/11/17 8:01:24

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