阅读更多

2顶
0踩

Web前端

翻译新闻 10 个基于CSS3/jQuery的加载动画设计方案

2012-03-01 15:04 by 正式编辑 sherry617 评论(4) 有13145人浏览
过去,由于加载图片的格式限制(只能使用GIF格式),设计加载动画不是那么容易。随着技术和浏览器的发展,用 CSS3 和 jQuery 就可以方便地设计加载动画,这种方式的高度可定制化以及服务器的进步使得开发者的各种要求得到满足。下面介绍10个实用的方案。

1. Sonic——循环的加载动画

Sonic是一个很小的JS“类”,你可以用它来创建自定义加载动画——蛇吞尾似的循环动画。


源码 / 演示

2. 闪烁的加载动画

用 CSS3 动画可以实现闪烁跳跃式的正在载入页面效果。


源码 / 演示

3. 旋转的加载动画(无需图片)

CSS transform(Firefox 3.5+和基于Webkit的浏览器中可用)有很多有趣的功能,如旋转、平移、缩放和倾斜等等都可以用来设计加载动画。


源码 + 演示

4. Ajax 风格的加载动画(无需图片)

图片是网站中非常重要的部分,如果使用gif图片作为加载动画,则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS,这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。


源码 / 演示

5. 圆圈风格的加载动画

简洁的 CSS3 代码能生成动画来显示加载进度,在样式类中修改宽度和高度值就可以设置圆圈的大小。


源码 / 演示

6. Flickr风格的加载动画

页面加载时,两个不同颜色的圆圈分别向左向右移动,之后再反向移动,一直重复循环。


源码 / 演示

7. Canvas元素加载生成器

这是一个免费的在线工具,可以为HTML项目生成各种加载动画,包含旋转和闪烁的效果。


源码 + 演示

8. CSS3 加载动画

三个简单的 CSS3 加载动画,分别以圆点、线条、方格的形式呈现。


源码 / 演示

9. CSS3 循环加载动画

三个 CSS3 循环动画,可以应用于许多领域,例如基于 jQuery 的图像预载。


源码 / 演示

10. 页面加载——jQuery 插件

这个jQuery插件能够在加载网页的时候显示加载进度视图,还可以自定义一些参数来设置该视图的颜色、加载图标、背景图片等等。


源码 / 演示

英文原文:10 CSS3 and jQuery Loading Animations Solutions
  • 大小: 40.7 KB
  • 大小: 45.7 KB
  • 大小: 41.4 KB
  • 大小: 48.3 KB
  • 大小: 54.4 KB
  • 大小: 49.2 KB
  • 大小: 43.1 KB
  • 大小: 65.5 KB
  • 大小: 65.8 KB
  • 大小: 47.2 KB
2
0
评论 共 4 条 请登录后发表评论
4 楼 Xiqincai 2015-12-08 18:02
GoEasy推送支持Java后台推送,JS推送,Android推送,兼容浏览器有IE6,7,8,9,10,11, Firefox, safari, chrome,推送稳定,速度快,上手快,java后台推送只需要两行代码, js前端推送也只需要3,4行,而且文档齐全,还提供了后台查询信息收发情况.
GoEasy官网:goeasy.io
快速入门:goeasy.io/www/started.jsp
文档:goeasy.io/www/docs.jsp
参考代码示例:
my.oschina.net/u/2544092/blog/540663
3 楼 satuo20 2012-03-02 10:37
cpu 杀手啊
2 楼 zyy7567093 2012-03-02 09:55
效果都不错, 可怜用户的IE6 啊
1 楼 gxyxd 2012-03-02 09:40
都不错,只可惜了杯具的IE

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics