关闭

CSS3创建H5预载动画效果

1181人阅读 评论(0) 收藏 举报
分类:

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

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

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

预载动画一:双旋圈

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

示例:

2212121212

显示HTML代码:

2015-03-09_191506

CSS代码:

2015-03-09_191556

 

预载动画二:交错圈

两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。

示例:

232112222

HTML代码:

2015-03-09_192002

CSS代码:

2015-03-09_192011


预载动画三:旋转圈

一个最传统的圆形预载动画效果。在这个示例中,整个#preloader-3 container div是一直旋转的,而非不同的圆形白色块填充区域。

示例:

4343252322

HTML代码:

2015-03-09_192230

CSS代码:

2015-03-09_192310


预载动画四:跳动圈

这是一种墨西哥波浪纹的动画效果,通过设置不同圆圈之间的延迟参数来实现。

示例:

5534534534

HTML代码:

2015-03-09_192350

CSS代码:

2015-03-09_192441


预载动画五:雷达圈

一种雷达辐射效果,给3个span elements设置相同的淡入淡出效果,再予每个稍微延迟下即可实现。

示例:

56465434

HTML代码:

2015-03-09_192506

CSS代码:

2015-03-09_192514


总计:

通过这些示例的技术,你可以理解CSS预载基础知识,然后打造自己的预载器。如你所见,这些不同的实现效果都非常有趣!虽然本教程的例子都比较简单,但超简单得就实现了我们所需的动画效果。

翻译:R.E.D / D5工作室 李格锐

本文出自这里>>>

原作者:Tony Thomas

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14049次
    • 积分:224
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:43篇
    • 译文:1篇
    • 评论:1条