有趣的css - 丝滑的加载条动画-CFANZ编程社区

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用css实现一个丝滑的加载条动画效果。

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

(目录)

整体效果

知识点： ①用 :after 创建伪元素 ② animation 动画属性的灵活使用 ③定位 position 属性的使用

思路：先绘制主体长条，然后使用 :after 创建伪元素来作为动画的载体，然后设置 animation 属性并设置参数来让伪元素动起来。

适用于程序网页加载场景，简单干净。

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

核心代码

html 代码

<div class="loading43"></div>

div 标签作为加载条主体。

css 部分代码

.loading43{
  width:140px;
  height:4px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
}
.loading43:after{
  content: '';
  height: 4px;
  border-radius: 2px;
  background-color: #2aa738;
  position: absolute;  /*这里不设置top、left属性，默认值就可以*/
  animation: eff43 2.4s ease-in-out infinite;
}
@keyframes eff43{
  0%{
    width: 0;
  }
  50%{
    width: 100%;
  }
  100%{
    width: 0;
    right: 0;  /*设置right值为0，使伪元素宽度变成0时，是从左往右变化*/
  }
}

1、页面中 div 作为主体，并用css绘制出加载条灰色主体 .loading43，这里注意要设置灰色主体定位属性 position: relative 。

2、然后基于加载条灰色主体创建伪元素 .loading43:after 并设置定位属性 position: absolute ，这里注意不需要设置 top 和 left 值，继承默认值就可以。

3、然后给伪元素加上动画属性 animation，在其后动画关键帧中基于关键帧 100% 时设置 right: 0 ，使伪元素在 100% 时宽度变为 0 时，是从左往右进行变化，形成视觉效果，加载条在从左往右消失。

完整代码如下

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="loading43"></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;
}
.loading43{
  width:140px;
  height:4px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
}
.loading43:after{
  content: '';
  height: 4px;
  border-radius: 2px;
  background-color: #2aa738;
  position: absolute;
  animation: eff43 2.4s ease-in-out infinite;
}
@keyframes eff43{
  0%{
    width: 0;
  }
  50%{
    width: 100%;
  }
  100%{
    width: 0;
    right: 0;
  }
}