CSS3创建H5预载动画效果

转载 2016年05月31日 18:00:36

预载是互联网交互设计中必不可少的元素之一,它们负责在内容显示前,既可增强用户体验的视觉有趣化,同时也避免了因低速网络环境导致的长时间响应问题。而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

h5新标签和css3动画制作一个鼠标悬停的动画效果

CrazyShark Lily likes to play with crayons and pencils ...

CSS3创建加载动画效果

加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站。 创建加载效果...
  • kaikai4
  • kaikai4
  • 2015年07月21日 11:06
  • 840

HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

HTML5正在变得越来越流行。在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近,Adobe宣布Flash将不再支持移动设备。这意味着,Adobe自身...

html5中css3新添加的动画效果

字css3中,动画着重要说的就是:transition属性,表示过渡 (1) 如何定义一个动画: 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。 di...

使用HTML5 SVG和CSS3制作边框运动的动画效果

本教程将和大家一起来研究如何使用html5 svg和css transitions来制作一种十分奇妙的图片边框运动的动画效果。 查看演示 下载...

HTML5+CSS3实现iOS Path菜单特效,动画效果很酷

HTML5+CSS3实现iOS Path菜单特效,动画效果很酷 源代码下载地址:http://www.zuidaima.com/share/1760404963691520.htm...

css3,js实现加载动画效果

  • 2014年10月14日 15:28
  • 3KB
  • 下载

css3个性页面加载动画效果

  • 2015年11月16日 15:35
  • 5KB
  • 下载

<html5+css3+js>用javascript显示隐藏,添加,删除元素,css动画效果

(《javascript&jquery交互式web前端开发》学习记录) HTML5: To Do List ListKing Buy Groceries fresh ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3创建H5预载动画效果
举报原因:
原因补充:

(最多只允许输入30个字)