loading动画特效小结
话不多说，请看代码
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>lodading动画效果上</title>
<linkrel="stylesheet"href="style.css"/>
<style>
.box{
width:100%;
padding:3%;
box-sizing:border-box;
overflow:hidden;
}
.box.loader{
width:30%;
float:left;
height:200px;
margin-right:3%;
border:1px#cccsolid;
box-sizing:border-box;
display:flex;
align-content:center;
justify-content:center;
position:relative;
}
.box.loading{
position:absolute;
top:50px;
}
@-webkit-keyframesloading-1{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(180deg);
}
100%{
transform:rotate(360deg);
}
}
.demo-1.loading{
width:35px;
height:35px;
position:relative;
}
.demo-1.loadingi{
display:block;
width:100%;
height:100%;
border-radius:50%;
background:linear-gradient(transparent0%,transparent70%,#33330%,#333100%);
-webkit-animation:loading-1.6slinear0sinfinite;
}
@-webkit-keyframesloading-2{
0%{
transform:scaleY(1);
}
50%{
transform:scaleY(0.4);
}
100%{
transform:scaleY(1);
}
}
.demo-2.loadingi{
display:inline-block;
width:4px;
height:35px;
border-radius:2px;
margin:02px;
background-color:#333;
}
.demo-2.loadingi:nth-child(1){
-webkit-animation:loading-21sease-in.1sinfinite;
}
.demo-2.loadingi:nth-child(2){
-webkit-animation:loading-21sease-in.2sinfinite;
}
.demo-2.loadingi:nth-child(3){
-webkit-animation:loading-21sease-in.3sinfinite;
}
.demo-2.loadingi:nth-child(4){
-webkit-animation:loading-21sease-in.4sinfinite;
}
.demo-2.loadingi:nth-child(5){
-webkit-animation:loading-21sease-in.5sinfinite;
}
.demo-3.loading{
position:relative;
}
.demo-3.loadingi{
display:block;
width:15px;
height:15px;
border-radius:50%;
background-color:#333;
position:absolute;
}
.demo-3.loadingi:nth-child(1){
top:25px;
left:0;
-webkit-animation:loading-31sease0sinfinite;
}
.demo-3.loadingi:nth-child(2){
top:17px;
left:17px;
-webkit-animation:loading-31sease-0.12sinfinite;
}
.demo-3.loadingi:nth-child(3){
top:0px;
left:25px;
-webkit-animation:loading-31sease-0.24sinfinite;
}
.demo-3.loadingi:nth-child(4){
top:-17px;
left:17px;
-webkit-animation:loading-31sease-0.36sinfinite;
}
.demo-3.loadingi:nth-child(5){
top:-25px;
left:0;
-webkit-animation:loading-31sease-0.48sinfinite;
}
.demo-3.loadingi:nth-child(6){
top:-17px;
left:-17px;
-webkit-animation:loading-31sease-0.6sinfinite;
}
.demo-3.loadingi:nth-child(7){
top:0px;
left:-25px;
-webkit-animation:loading-31sease-0.72sinfinite;
}
.demo-3.loadingi:nth-child(8){
top:17px;
left:-17px;
-webkit-animation:loading-31sease-0.84sinfinite;
}
@-webkit-keyframesloading-3{
50%{
transform:scale(0.4);
opacity:.3
}
100%{
transform:scale(1);
opacity:1
}
}
@-webkit-keyframesloading-4{
0%{
transform:scale(0);
opacity:0;
}
1%{
opacity:1;
}
100%{
transform:scale(1);
opacity:0;
}
}
.demo-4.loadingi:nth-child(1){
-webkit-animation:loading-41slinear0sinfinite;
}
.demo-4.loadingi:nth-child(2){
-webkit-animation:loading-41slinear0.2sinfinite;
}
.demo-4.loadingi:nth-child(3){
-webkit-animation:loading-41slinear0.4sinfinite;
}
.demo-4.loading{
width:60px;
height:60px;
position:relative;
}
.demo-4.loadingi{
display:block;
width:60px;
height:60px;
border-radius:50%;
background-color:#333;
position:absolute;
left:0;
top:0;
opacity:0;
}
.demo-5.loading{
width:40px;
height:40px;
position:relative;
}
.demo-5.loadingi{
display:block;
border:2pxsolid#333;
border-color:transparent#333;
border-radius:50%;
position:absolute;
}
.demo-5.loadingi:first-child{
width:35px;
height:35px;
top:0px;
left:0px;
-webkit-animation:loading-51sease-in-out0sinfinite;
}
.demo-5.loadingi:last-child{
width:15px;
height:15px;
top:10px;
left:10px;
-webkit-animation:loading-51sease-in-out0.5sinfinitereverse;
}
@-webkit-keyframesloading-5{
0%{
transform:rotate(0deg)scale(1);
}
50%{
transform:rotate(180deg)scale(0.6);
}
100%{
transform:rotate(360deg)scale(1);
}
}
.demo-6.loading{
width:80px;
height:20px;
position:relative;
}
.demo-6.loadingi{
display:block;
width:20px;
height:20px;
border-radius:50%;
background-color:#333;
margin-right:10px;
position:absolute;
}
@-webkit-keyframesloading-6{
0%{
left:100px;
top:0;
}
80%{
left:0;
top:0;
}
85%{
left:0;
top:-20px;
width:20px;
height:20px;
}
90%{
width:40px;
height:20px;
}
95%{
left:100px;
top:-20px;
width:20px;
height:20px;
}
100%{
left:100px;
top:0;
}
}
.demo-6.loadingi:nth-child(1){
-webkit-animation:loading-62slinear0sinfinite;
}
.demo-6.loadingi:nth-child(2){
-webkit-animation:loading-62slinear-0.4sinfinite;
}
.demo-6.loadingi:nth-child(3){
-webkit-animation:loading-62slinear-0.8sinfinite;
}
.demo-6.loadingi:nth-child(4){
-webkit-animation:loading-62slinear-1.2sinfinite;
}
.demo-6.loadingi:nth-child(5){
-webkit-animation:loading-62slinear-1.6sinfinite;
}
.demo-7.loadingi{
background-color:#777;
border-radius:2px;
margin:2px;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
position:absolute;
width:5px;
height:15px;
}
.demo-7.loading-1{
top:20px;
left:0;
-webkit-animation:loading1.2s0.12sinfiniteease-in-out;
-moz-animation:loading1.2s0.12sinfiniteease-in-out;
-ms-animation:loading1.2s0.12sinfiniteease-in-out;
-o-animation:loading1.2s0.12sinfiniteease-in-out;
animation:loading1.2s0.12sinfiniteease-in-out;
}
.demo-7.loading-2{
top:13.63636px;
left:13.63636px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-animation:loading1.2s0.24sinfiniteease-in-out;
-moz-animation:loading1.2s0.24sinfiniteease-in-out;
-ms-animation:loading1.2s0.24sinfiniteease-in-out;
-o-animation:loading1.2s0.24sinfiniteease-in-out;
animation:loading1.2s0.24sinfiniteease-in-out;
}
.demo-7.loading-3{
top:0;
left:20px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:loading1.2s0.36sinfiniteease-in-out;
-moz-animation:loading1.2s0.36sinfiniteease-in-out;
-ms-animation:loading1.2s0.36sinfiniteease-in-out;
-o-animation:loading1.2s0.36sinfiniteease-in-out;
animation:loading1.2s0.36sinfiniteease-in-out;
}
.demo-7.loading-4{
top:-13.63636px;
left:13.63636px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-animation:loading1.2s0.48sinfiniteease-in-out;
-moz-animation:loading1.2s0.48sinfiniteease-in-out;
-ms-animation:loading1.2s0.48sinfiniteease-in-out;
-o-animation:loading1.2s0.48sinfiniteease-in-out;
animation:loading1.2s0.48sinfiniteease-in-out;
}
.demo-7.loading-5{
top:-20px;
left:0;
-webkit-animation:loading1.2s0.6sinfiniteease-in-out;
-moz-animation:loading1.2s0.6sinfiniteease-in-out;
-ms-animation:loading1.2s0.6sinfiniteease-in-out;
-o-animation:loading1.2s0.6sinfiniteease-in-out;
animation:loading1.2s0.6sinfiniteease-in-out;
}
.demo-7.loading-6{
top:-13.63636px;
left:-13.63636px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-animation:loading1.2s0.72sinfiniteease-in-out;
-moz-animation:loading1.2s0.72sinfiniteease-in-out;
-ms-animation:loading1.2s0.72sinfiniteease-in-out;
-o-animation:loading1.2s0.72sinfiniteease-in-out;
animation:loading1.2s0.72sinfiniteease-in-out;
}
.demo-7.loading-7{
top:0;
left:-20px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:loading1.2s0.84sinfiniteease-in-out;
-moz-animation:loading1.2s0.84sinfiniteease-in-out;
-ms-animation:loading1.2s0.84sinfiniteease-in-out;
-o-animation:loading1.2s0.84sinfiniteease-in-out;
animation:loading1.2s0.84sinfiniteease-in-out;
}
.demo-7.loading-8{
top:13.63636px;
left:-13.63636px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-animation:loading1.2s0.96sinfiniteease-in-out;
-moz-animation:loading1.2s0.96sinfiniteease-in-out;
-ms-animation:loading1.2s0.96sinfiniteease-in-out;
-o-animation:loading1.2s0.96sinfiniteease-in-out;
animation:loading1.2s0.96sinfiniteease-in-out;
}
@-webkit-keyframesloading{
50%{
opacity:0.3;
}
100%{
opacity:1;
}
}
@-moz-keyframesloading{
50%{
opacity:0.3;
}
100%{
opacity:1;
}
}
@-ms-keyframesloading{
50%{
opacity:0.3;
}
100%{
opacity:1;
}
}
@-o-keyframesloading{
50%{
opacity:0.3;
}
100%{
opacity:1;
}
}
@keyframesloading{
50%{
opacity:0.3;
}
100%{
opacity:1;
}
}
</style>
</head>
<body>
<divclass="box">
<divclass="loaderdemo-1">
<divclass="loading">
<i></i>
</div>
</div>
<divclass="loaderdemo-2">
<divclass="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<divclass="loaderdemo-3">
<divclass="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<divclass="loaderdemo-4">
<divclass="loading">
<i></i>
<i></i>
<i></i>
</div>
</div>
<divclass="loaderdemo-5">
<divclass="loading">
<i></i>
<i></i>
</div>
</div>
<divclass="loaderdemo-6">
<divclass="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<divclass="loaderdemo-7">
<divclass="loading">
<iclass="loading-1"></i>
<iclass="loading-2"></i>
<iclass="loading-3"></i>
<iclass="loading-4"></i>
<iclass="loading-5"></i>
<iclass="loading-6"></i>
<iclass="loading-7"></i>
<iclass="loading-8"></i>
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！