/*下拉刷新--上下箭头*/
|
.mescroll-downwarp .downwarp-arrow {
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
margin: 10px;
|
background-image: url(https://www.mescroll.com/img/xinlang/mescroll-arrow.png);
|
background-size: contain;
|
vertical-align: middle;
|
transition: all 300ms;
|
}
|
|
/*下拉刷新--旋转进度条*/
|
.mescroll-downwarp .downwarp-progress{
|
width: 36px;
|
height: 36px;
|
border: none;
|
margin: auto;
|
background-size: contain;
|
animation: progressRotate 0.6s steps(6, start) infinite;
|
}
|
@keyframes progressRotate {
|
0% {
|
background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress1.png);
|
}
|
16% {
|
background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress2.png);
|
}
|
32% {
|
background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress3.png);
|
}
|
48% {
|
background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress4.png);
|
}
|
64% {
|
background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress5.png);
|
}
|
80% {
|
background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress6.png);
|
}
|
100% {
|
background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress1.png);
|
}
|
}
|