web页面开发过程，基本流程：查询-->>显示；查询时间或长或短，为了提升用户体验，目前用的比较多的手段之一就是查询等待时添加一个动态等待效果
工具/原料
文本编辑器
方法/步骤
1
1、直接贴图：在界面上贴一个gif动态等待效果图片gif图片获取方式：网上找素材，会ps的可以自己制作
2
2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制下面提供一个CSS3绘制的范例
3
4-------------------------------------------------效果如下图：运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现
5
3、使用js等待效果插件(如：spin.js)
6
JS-----------------------------------------------------var opts = { 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%' }; var target = document.getElementById('img_wait'); var spinner = new Spinner(opts).spin(target);
7
html---------------------------------
8
打开测试，效果如下
下一篇：水波倒影动态图制作方法