纯CSS3实现的几种loading动画效果
css实现loading动画非常方便，也非常实用
第一种
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading1{
width:50px;
height:40px;
margin:60px auto;
text-align:center;
}
.loading1 span{
width:5px;
height:100%;
display:inline-block;
background:#67CF22;;
animation: mymove 1.2s infinite ease-in-out;
-webkit-animation:mymove 1.2s infinite ease-in-out;
/*
mymove代表动画名字
1.2s代表执行时间
infinite表示一直循环执行
ease-in-out表示先慢后快的缓动
*/
}
.loading1 >span:nth-child(2){
-webkit-animation-delay:-1.0s;
animation-delay:-1.0s;
}
.loading1 >span:nth-child(3){
-webkit-animation-delay:-0.9s;
animation-delay:-0.9s;
}
.loading1 >span:nth-child(4){
-webkit-animation-delay:-0.8s;
animation-delay:-0.8s;
}
.loading1 >span:nth-child(5){
-webkit-animation-delay:-0.7s;
animation-delay:-0.7s;
}
@keyframes mymove{
0%{transform:scaleY(0.4);}
25%{transform:scaleY(1.0);}
50%{transform:scaleY(0.4);}
75%{transform:scaleY(0.4);}
100%{transform:scaleY(0.4);}
}
@-webkit-keyframes mymove{
0%{transform:scaleY(0.4);}
25%{transform:scaleY(1.0);}
50%{transform:scaleY(0.4);}
75%{transform:scaleY(0.4);}
100%{transform:scaleY(0.4);}
}
</style>
</head>
<body>
<div class="loading1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
第二种
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading2{
width:50px;
height:50px;
margin:50px auto;
position:relative;
}
.bounce{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.bounce2{
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@keyframes bounce{
0%{transform:scale(0.0);}
50%{transform:scale(1.0);}
100%{transform:scale(0.0);}
}
@-webkit-keyframes bounce{
0%{transform:scale(0.0);}
50%{transform:scale(1.0);}
100%{transform:scale(0.0);}
}
</style>
</head>
<body>
<div class="loading2">
<div class="bounce bounce1"></div>
<div class="bounce bounce2"></div>
</div>
</body>
</html>
第三种
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading3{
width:30px;
height:30px;
margin:50px auto;
position:relative;
}
.circle{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.circle span{
width:8px;
height:8px;
display:inline-block;
background:#67CF22;
border-radius: 100%;
position:absolute;
-webkit-animation: mycircle 1.2s infinite ease-in-out;
animation: mycircle 1.2s infinite ease-in-out;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
}
.circle2{
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.circle3{
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle>span:nth-child(1){
top:0;
left:0;
}
.circle>span:nth-child(2){
top:0;
right:0;
}
.circle>span:nth-child(3){
right:0;
bottom:0;
}
.circle>span:nth-child(4){
left:0;
bottom:0;
}
.circle2 >span:nth-child(1){
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.circle3 >span:nth-child(1){
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.circle1 >span:nth-child(2){
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.circle2 >span:nth-child(2){
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.circle3 >span:nth-child(2){
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.circle1 >span:nth-child(3){
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.circle2 >span:nth-child(3){
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.circle3 >span:nth-child(3){
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.circle1 >span:nth-child(4){
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.circle2 >span:nth-child(4){
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.circle3 >span:nth-child(4){
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes mycircle{
0%{transform:scale(0.0);}
40%{transform:scale(1.0);}
80%{transform:scale(0.0);}
100%{transform:scale(0.0);}
}
@keyframes mycircle{
0%{transform:scale(0.0);}
40%{transform:scale(1.0);}
80%{transform:scale(0.0);}
100%{transform:scale(0.0);}
}
</style>
</head>
<body>
<div class="loading3">
<div class="circle circle1">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="circle circle2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="circle circle3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
第四种
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.loading4{
width:150px;
margin:50px auto;
text-align: center;
}
.loading4 >div{
width: 18px;
height: 18px;
border-radius: 100%;
display:inline-block;
background-color: #67CF22;
-webkit-animation: three 1.4s infinite ease-in-out;
animation: three 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.loading4 .three1{
-webkit-animation-delay: -0.30s;
animation-delay: -0.30s;
}
.loading4 .three2{
-webkit-animation-delay: -0.15s;
animation-delay: -0.15s;
}
@-webkit-keyframes three {
0%, 80%, 100% {-webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes three {
0%, 80%, 100% {-webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
</style>
</head>
<body>
<div class="loading4">
<div class="three1"></div>
<div class="three2"></div>
<div class="three3"></div>
</div>
</body>
</html>
以上是 纯CSS3实现的几种loading动画效果 的全部内容， 来源链接： utcz.com/a/61095.html
