正文
css3 实现loading效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1 圆点渐入渐出
要点： 缩放和透明度的变化,循环变化
<div class="demo1"></div>
.demo1{
width: 40px;
height: 40px;
margin: 0 auto;
border-radius: 100px;
background-color: red;
opacity:;
animation: fadeIn 1s infinite ease-in-out;
}
@-webkit-keyframes fadeIn{
from{
transform: scale(0);
}
to{
transform: scale(1);
opacity:;
}
}
@keyframes fadeIn{
from{
transform: scale(0);
}
to{
transform: scale(1);
opacity:;
}
}
2 线条loading图
要点：使用缩放实现线条的高度的变化，循环变化，使用animation-delay的负值实现动画的连续变化（负值：动画立即执行，从设置的值之后开始执行动画，比如是-1s，表示从动画的1s之后开始执行，前一秒的动画直接跳过，不执行）
html
<div class="demo2">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
</div>
css
.demo2 div{
width: 3px;
height: 20px;
margin-right: 2px;
display: inline-block;
background-color: green;
animation: loading 1.2s infinite ease-in-out;
}
.demo2 .line2{
animation-delay: -1.1s;
}
.demo2 .line3{
animation-delay: -1s;
}
.demo2 .line4{
animation-delay: -0.9s;
}
.demo2 .line5{
animation-delay: -0.8s;
}
@keyframes loading{
0%,40%,100%{
transform: scaleY(.4);
}
20%{
transform: scaleY(1);
}
}
@-webkit-keyframes loading{
0%,40%,100%{
transform: scaleY(.4);
}
20%{
transform: scaleY(1);
}
}
3 旋转圆圈loading
要点：利用边框颜色实现，实现一个圆有一个边的颜色不一样，然后让元素一直循环旋转；
<div class="dem3"></div>
.demo3{
width: 100px;
height: 100px;
border: 3px solid #eee;
border-left-color: #fff;
margin: 100px auto;
border-radius: 100px;
animation: loading1s infinite linear;
}
@keyframes loading{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
