mescroll-down.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. /*下拉刷新--上下箭头*/
  2. .mescroll-downwarp .downwarp-arrow {
  3. display: inline-block;
  4. width: 20px;
  5. height: 20px;
  6. margin: 10px;
  7. background-image: url(https://www.mescroll.com/img/xinlang/mescroll-arrow.png);
  8. background-size: contain;
  9. vertical-align: middle;
  10. transition: all 300ms;
  11. }
  12. /*下拉刷新--旋转进度条*/
  13. .mescroll-downwarp .downwarp-progress{
  14. width: 36px;
  15. height: 36px;
  16. border: none;
  17. margin: auto;
  18. background-size: contain;
  19. animation: progressRotate 0.6s steps(6, start) infinite;
  20. }
  21. @keyframes progressRotate {
  22. 0% {
  23. background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress1.png);
  24. }
  25. 16% {
  26. background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress2.png);
  27. }
  28. 32% {
  29. background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress3.png);
  30. }
  31. 48% {
  32. background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress4.png);
  33. }
  34. 64% {
  35. background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress5.png);
  36. }
  37. 80% {
  38. background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress6.png);
  39. }
  40. 100% {
  41. background-image: url(https://www.mescroll.com/img/xinlang/mescroll-progress1.png);
  42. }
  43. }