预载是互联网交互设计中必不可少的元素之一,它们负责在内容显示前,既可增强用户体验的视觉有趣化,同时也避免了因低速网络环境导致的长时间响应问题。而CCS3预载不仅是替换图片类预载的优化方案,同时也支持Retina等高清屏幕下的快速显示。
动画预载是内容加载前支持快速响应的最简单动画效果。动画预载经常被使用在动态加载页面或服务器端指示进程操作中。一般我们都会使用压缩后的GIF图片来做动画预载元素。但是现在我们有一个更轻便的优化方案:即用CSS3代码实现全部动画效果,无需用到任何的图片素材。
下面是五个仅使用H5页面和CSS3代码实现的动画预载实例。
预载动画一:双旋圈
在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。
示例:
显示HTML代码:
CSS代码:
预载动画二:交错圈
两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。
示例:
HTML代码:
CSS代码:
预载动画三:旋转圈
一个最传统的圆形预载动画效果。在这个示例中,整个#preloader-3 container div是一直旋转的,而非不同的圆形白色块填充区域。
示例:
HTML代码:
CSS代码:
预载动画四:跳动圈
这是一种墨西哥波浪纹的动画效果,通过设置不同圆圈之间的延迟参数来实现。
示例:
HTML代码:
CSS代码:
预载动画五:雷达圈
一种雷达辐射效果,给3个span elements设置相同的淡入淡出效果,再予每个稍微延迟下即可实现。
示例:
HTML代码:
CSS代码:
总计:
通过这些示例的技术,你可以理解CSS预载基础知识,然后打造自己的预载器。如你所见,这些不同的实现效果都非常有趣!虽然本教程的例子都比较简单,但超简单得就实现了我们所需的动画效果。
翻译:R.E.D / D5工作室 李格锐
本文出自这里>>>:
原作者:Tony Thomas