Question

如何给html页面添加动态等待效果

Answer 1

1、直接贴图：在界面上贴一个gif动态等待效果图片gif图片获取方式：网上找素材，会ps的可以自己制作2、CSS3/SVG/HTML5Canvas手动绘制等待效果：这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制下面提供一个CSS3绘制的范例.loading{width:0;height:0;border-right:20pxsolid#fff;border-top:20pxsolid#000;border-left:20pxsolid#fff;border-bottom:20pxsolid#000;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;}.loading{animation:bganim0.6slinear0sinfinite;-moz-animation:bganim0.6slinear0sinfinite;-webkit-animation:bganim0.6slinear0sinfinite;}@keyframesbganim{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@-moz-keyframesbganim{from{-moz-transform:rotate(0deg);}to{-moz-transform:rotate(360deg);}}@-webkit-keyframesbganim{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);}}CSS3效果-------------------------------------------------效果如下图：运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现3、使用js等待效果插件(如：spin.js)JS-----------------------------------------------------varopts={lines:9,length:0,width:15,radius:20,corners:1,rotate:0,direction:1,color:'#0101DF',speed:1,trail:34,shadow:false,hwaccel:false,className:'spinner',zIndex:2e9,top:'50%',left:'50%'};vartarget=document.getElementById('img_wait');varspinner=newSpinner(opts).spin(target);7html---------------------------------