转载

仅用CSS3创建H5预载动画效果

预载是互联网交互设计中必不可少的元素之一，它们负责在内容显示前，既可增强用户体验的视觉有趣化，同时也避免了因低速网络环境导致的长时间响应问题。而 CCS3预载 不仅是替换图片类预载的优化方案，同时也支持Retina等高清屏幕下的快速显示。

动画预载是内容加载前支持快速响应的最简单动画效果。 动画预载 经常被使用在动态加载页面或服务器端指示进程操作中。一般我们都会使用压缩后的GIF图片来做动画预载元素。但是现在我们有一个更轻便的优化方案：即用CSS3代码实现全部动画效果，无需用到任何的图片素材。

下面是五个仅使用H5页面和CSS3代码实现的动画预载实例。

预载动画一：双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。

示例：

仅用CSS3创建H5预载动画效果

HTML代码：

−    −DVFMTSC    −    −>−−    −DVFMTSC    −    −>−DVFMTSC−    −DVFMTSC    −    −>−−    −DVFMTSC    −    −>−>−−    −DVFMTSC    −    −>−−    −DVFMTSC    −    −>−DVFMTSC−    −DVFMTSC    −    −>−−    −DVFMTSC    −    −>−>−DVFMTSC−    −DVFMTSC    −    −>−−    −DVFMTSC    −    −>−DVFMTSC−    −DVFMTSC    −    −>−−    −DVFMTSC    −    −>−>−−    −DVFMTSC    −    −>−−    −DVFMTSC    −    −>−DVFMTSC−    −DVFMTSC    −    −>−−    −DVFMTSC    −    −>−>−>