/* * è‡ªå®šä¹‰ä¸‹æ‹‰åˆ·æ–°å’Œä¸Šæ‹‰åŠ è½½çš„ç»“æž„ * //下拉刷新区域 <div class="mescroll-downwarp"> <div class="downwarp-content"> <p class="downwarp-progress"></p> </div> </div> //ä¸Šæ‹‰åŠ è½½åŒºåŸŸ <div class="mescroll-upwarp"> //åŠ è½½ä¸.. <p class="upwarp-progress mescroll-rotate"></p> //æ— æ•°æ® <p class="upwarp-nodata">-- END --</p> </div> */ /*旋转进度æ¡*/ .mescroll-downwarp .downwarp-progress, .mescroll-upwarp .upwarp-progress { width: 24px; height: 24px; border: none; margin: auto; background-image: url(mescroll-progress.jpg); background-size: contain; } /*放大旋转动画*/ .mescroll-rotate{ -webkit-animation: animScale 0.6s linear, mescrollRotate 0.6s linear infinite; animation: animScale 0.6s linear, mescrollRotate 0.6s linear infinite; } @-webkit-keyframes animScale { 0% { -webkit-transform: scale(1,1) rotate(0deg) } 50% { -webkit-transform: scale(1.2,1.2) rotate(180deg) } 100% { -webkit-transform: scale(1,1) rotate(360deg) } } @keyframes animScale { 0% { transform: scale(1,1) rotate(0deg) } 50% { transform: scale(1.2,1.2) rotate(180deg) } 100% { transform: scale(1,1) rotate(360deg) } }