在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个。
图片加载完后,隐藏loading效果。
想看加载效果,请ctrel+F5强制刷新或者清理缓存。
效果预览:
0%
代码如下:
HTML5+javascript实现图片加载进度动画效果.loading {width:200px;height:200px;position:relative;margin:50px auto;border:1px solid #f90;border-radius:%;}
.dot {width:%;;height:%;animation:rond .8s infinite;-webkit-animation:rond .8s infinite;}
.dot:after {width:10px;height:10px;position:absolute;top:-5px;left:90px;content:"";display:table;background-color:#f50;border-radius:%;}
.num {width:%;height:%;position:absolute;top:;left:;line-height:200px;text-align:center;font-size:20px;color:#f60;}
@keyframes rond {
% {transform:rotate(0deg);}
% {transform:rotate(360deg);}
}
@-webkit-keyframes rond {
% {-webkit-transform:rotate(0deg);}
% {-webkit-transfo