小编给大家分享一下如何使用纯css实现简单加载动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
效果图
思路
CSS 用于修饰 HTML，所以即便是再简单的效果，都是要依赖于 HTML 的，而本例效果的实现 HTML 布局更是重中之重。
先来分析动画效果组成：
线条
加载静止的话，就是几个线条组成了一个圈
这些线条长度一致，只是方向有所差别
每个线条不是贯穿整个直径，而是以半径为单位
圆
整体效果是一个圆环，内圆的背景色和整个背景一致
动画
从某一个线条开始，每个半径线条颜色（透明度）逐个发生变化
综上，我们用以下步骤一步步解开加载效果的神秘面纱：
（1）用 HTML 实现沿某个点分布的相同线条，由它们组成一个圆形
（2）画一个小圆，添加背景色，并覆盖至线条圆心处
（3）添加渐变动画，使线条透明度发生变化
（4）通过给不同线条设置不同动画延迟，让线条动起来
HTML
计算
安全
数据库
网络和加速
企业服务
<div id="container">
<div class="load-line rotate-0">
<span class="left"></span>
<span class="right"></span>
</div>
<div class="load-line rotate-30">
<span class="left"></span>
<span class="right"></span>
</div>
<div class="load-line rotate-60">
<span class="left"></span>
<span class="right"></span>
</div>
<div class="load-line rotate-90">
<span class="left"></span>
<span class="right"></span>
</div>
<div class="load-line rotate-120">
<span class="left"></span>
<span class="right"></span>
</div>
<div class="load-line rotate-150">
<span class="left"></span>
<span class="right"></span>
</div>
<div id="circle-center"></div>
</div>解析：
load-line 表示在同一直径的半径线条，由于旋转方向一致，将其放在同一 p 中
由于每个半径线条的动画延迟不一样，添加 left 和 right 两种线条
circle-center 表示内圆
CSS
#container, #circle-center {
background: grey;
}
#container {
position: relative;
width: 600px;
height: 300px;
}
#circle-center {
position: absolute;
top: 100px;
left: 250px;
width: 100px;
height: 100px;
border-radius: 100px;
}
.load-line {
position: absolute;
top: 150px;
left: 200px;
width: 200px;
height: 13px;
}
.load-line > span {
display: inline-block;
width: 50%;
height: 100%;
border-radius: 20px;
background: white;
}
.left {
float: left;
}
.right {
float: right;
}
.rotate-0 {
transform: rotate(0);
}
.rotate-0 > .left {
animation: load-effect 1.2s linear 0s infinite;
}
.rotate-0 > .right {
animation: load-effect 1.2s linear 0.6s infinite;
}
.rotate-30 {
transform: rotate(30deg);
}
.rotate-30 > .left {
animation: load-effect 1.2s linear 0.1s infinite;
}
.rotate-30 > .right {
animation: load-effect 1.2s linear 0.7s infinite;
}
.rotate-60 {
transform: rotate(60deg);
}
.rotate-60 > .left {
animation: load-effect 1.2s linear 0.2s infinite;
}
.rotate-60 > .right {
animation: load-effect 1.2s linear 0.8s infinite;
}
.rotate-90 {
transform: rotate(90deg);
}
.rotate-90 > .left {
animation: load-effect 1.2s linear 0.3s infinite;
}
.rotate-90 > .right {
animation: load-effect 1.2s linear 0.9s infinite;
}
.rotate-120 {
transform: rotate(120deg);
}
.rotate-120 > .left {
animation: load-effect 1.2s linear 0.4s infinite;
}
.rotate-120 > .right {
animation: load-effect 1.2s linear 1.0s infinite;
}
.rotate-150 {
transform: rotate(150deg);
}
.rotate-150 > .left {
animation: load-effect 1.2s linear 0.5s infinite;
}
.rotate-150 > .right {
animation: load-effect 1.2s linear 1.1s infinite;
}
@keyframes load-effect {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}解析：
整个效果的父容器需要设置非 static 的定位，方便子元素布局。本例为 relative
所有线条大小一致，并且有圆角
沿同一直径方向的线条旋转角度一致
所有线条动画效果一致（透明度在变化），动画时长一致，动画延迟从某一个线条开始，逐个递加
以上是“如何使用纯css实现简单加载动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
