sailun-shop/luntai/mescroll/mescroll.min.css

/* mescroll
 * version 1.4.2
 * 2019-08-01 wenju
 * http://www.mescroll.com
 */
html,body{height:100%}body{-webkit-overflow-scrolling:touch}.mescroll{width:100%;height:100%;overflow-y:auto}.mescroll-hardware{-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-perspective:1000}.mescroll-downwarp{position:relative;width:100%;height:0;overflow:hidden;text-align:center}.mescroll-downwarp-reset{-webkit-transition:height 300ms;transition:height 300ms}.mescroll-downwarp .downwarp-content{position:absolute;left:0;bottom:0;width:100%;min-height:30px;padding:10px 0}.mescroll-upwarp{min-height:30px;padding:15px 0;text-align:center;visibility:hidden}.mescroll-downwarp .downwarp-tip,.mescroll-upwarp .upwarp-tip,.mescroll-upwarp .upwarp-nodata{display:inline-block;font-size:12px;color:gray;vertical-align:middle}.mescroll-downwarp .downwarp-tip,.mescroll-upwarp .upwarp-tip{margin-left:8px}.mescroll-downwarp .downwarp-progress,.mescroll-upwarp .upwarp-progress{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid gray;border-bottom-color:transparent;vertical-align:middle}.mescroll-rotate{-webkit-animation:mescrollRotate .6s linear infinite;animation:mescrollRotate .6s linear infinite}@-webkit-keyframes mescrollRotate{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes mescrollRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.mescroll-empty{width:100%;padding-top:20px;text-align:center}.mescroll-empty .empty-icon{width:45%}.mescroll-empty .empty-tip{margin-top:6px;font-size:14px;color:gray}.mescroll-empty .empty-btn{max-width:50%;margin:20px auto;padding:10px;border:1px solid #65aadd;border-radius:6px;background-color:white;color:#65aadd}.mescroll-empty .empty-btn:active{opacity:.75}.mescroll-totop{z-index:9990;position:fixed;right:10px;bottom:30px;width:36px;height:36px;border-radius:50%;opacity:0}.mescroll-lazy-in,.mescroll-fade-in{-webkit-animation:mescrollFadeIn .5s linear forwards;animation:mescrollFadeIn .5s linear forwards}@-webkit-keyframes mescrollFadeIn{0%{opacity:0}100%{opacity:1}}@keyframes mescrollFadeIn{0%{opacity:0}100%{opacity:1}}.mescroll-fade-out{pointer-events:none;-webkit-animation:mescrollFadeOut .5s linear forwards;animation:mescrollFadeOut .5s linear forwards}@-webkit-keyframes mescrollFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes mescrollFadeOut{0%{opacity:1}100%{opacity:0}}.mescroll-bar::-webkit-scrollbar-track{background-color:transparent}.mescroll-bar::-webkit-scrollbar{width:6px}.mescroll-bar::-webkit-scrollbar-thumb{border-radius:6px;background-color:#ccc}.mescroll-bar::-webkit-scrollbar-thumb:hover{background-color:#aaa}


/*
 * 自定义下拉刷新和上拉加载的结构
 *
	//下拉刷新区域
	<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) }
}