1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- /*下拉刷新--上下箭头*/
- .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);
- }
- }
|