mescroll-down.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /* 下拉刷新区域 */
  2. .mescroll-downwarp {
  3. position: absolute;
  4. top: -100%;
  5. left: 0;
  6. width: 100%;
  7. height: 100%;
  8. text-align: center;
  9. }
  10. /* 下拉刷新--内容区,定位于区域底部 */
  11. .mescroll-downwarp .downwarp-content {
  12. position: absolute;
  13. left: 0;
  14. bottom: 0;
  15. width: 100%;
  16. min-height: 60rpx;
  17. padding: 20rpx 0;
  18. text-align: center;
  19. }
  20. /* 下拉刷新--提示文本 */
  21. .mescroll-downwarp .downwarp-tip {
  22. display: inline-block;
  23. font-size: 28rpx;
  24. vertical-align: middle;
  25. margin-left: 16rpx;
  26. /* color: gray; 已在style设置color,此处删去*/
  27. }
  28. /* 下拉刷新--旋转进度条 */
  29. .mescroll-downwarp .downwarp-progress {
  30. display: inline-block;
  31. width: 32rpx;
  32. height: 32rpx;
  33. border-radius: 50%;
  34. border: 2rpx solid gray;
  35. border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
  36. vertical-align: middle;
  37. }
  38. /* 旋转动画 */
  39. .mescroll-downwarp .mescroll-rotate {
  40. animation: mescrollDownRotate 0.6s linear infinite;
  41. }
  42. @keyframes mescrollDownRotate {
  43. 0% {
  44. transform: rotate(0deg);
  45. }
  46. 100% {
  47. transform: rotate(360deg);
  48. }
  49. }