loading实现

loading1：

布局实现：

<div class="out">
<div class="in">

</div>
</div>

style  css3动画属性实现loading

.out{
margin: 0 auto;
width: 46px;
height: 46px;
background: linear-gradient(black,white) ;
border-radius: 50%;
text-align: center;
overflow: hidden;

}
.in{
width: 40px;
height: 40px;
background: white;
margin-top:3px;
margin-left:3px;
border-radius: 50%;
}
.out{
animation: move 1s ease infinite;

}
@keyframes move{
0%{transform: rotate(0deg);}
0%{transform: rotate(360deg);}
}

loading2：

布局：

<div class="pencil">
<div class="pen">

</div>
<div class="pen">

</div>
<div class="pen">

</div>
<div class="bottom">
</div>
</div>

样式实现：

.pencil{
margin: 0 auto;
width: 200px;
height: 30px;
/*border-bottom: 5px solid #ccc;*/
position: relative;
}
.pencil>div{
float: left;
margin-left:15px ;

}
.pen{
width: 3px;
height:30px ;
background: black;
transform-origin: center bottom;
}
.pen:nth-child(1){
animation: move1 1s infinite;
}
.pen:nth-child(2){
animation: move2 1s infinite;

}
.pen:nth-child(3){
animation: move3 1s infinite;
}
.bottom{
position: absolute;
width: 10px;
height: 5px;
background: violet;
margin: 0 auto;
bottom: -5px;
animation: move4 1s infinite;
}
@keyframes move4{
0%{width: 10px;}
100%{width: 65px;}
}
@keyframes move1{
0%{transform: rotate(0deg);}
30%{transform: rotate(75deg);}
100%{transform: rotate(90deg);}
}
@keyframes move2{
0%{transform: rotate(0deg);}
60%{transform: rotate(80deg);}
100%{transform: rotate(90deg);}
}
@keyframes move3{
0%{transform: rotate(0deg);}
100%{transform: rotate(90deg);}
}

转载于:https://www.cnblogs.com/luxinyi/p/9710013.html