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

开发 前端
过去,由于加载图片的格式限制(只能使用GIF格式),设计加载动画不是那么容易。随着技术和浏览器的发展,用 CSS3 和 jQuery 就可以方便地设计加载动画,这种方式的高度可定制化以及服务器的进步使得开发者的各种要求得到满足。下面介绍10个实用的方案。

过去,由于加载图片的格式限制(只能使用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插件能够在加载网页的时候显示加载进度视图,还可以自定义一些参数来设置该视图的颜色、加载图标、背景图片等等。 

源码 / 演示 

原文:http://www.iteye.com/news/24390

【编辑推荐】

  1. 10条建议让你创建更好的jQuery插件
  2. 使用jQuery和CSS3实现的超炫3D画廊特效
  3. 前端必备:jQuery 1.7.1API手册
  4. 8款超赞的响应式jQuery幻灯片插件推荐
  5. jQuery基本原理
责任编辑:陈贻新 来源: iteye
相关推荐

2017-05-11 15:20:52

CSS3动画前端

2012-09-13 09:24:31

CSSJSjQ

2013-09-24 13:56:25

jQueryCSS

2011-06-29 13:22:58

CSS3

2011-05-11 16:13:43

CSS3

2012-05-27 18:28:46

jQuery Mobi

2022-10-11 23:26:54

css3attr函数

2012-08-17 11:01:52

设计方案

2015-12-01 09:52:03

CSS3动画源码

2015-10-10 14:22:46

jQueryCSS3栏菜单

2012-11-15 09:41:43

jQuery

2011-11-11 10:01:37

HTML 5

2015-09-10 08:45:39

CSS3生成器

2017-03-23 10:21:57

CSS3动效库前端

2014-02-17 10:12:11

移动APP动画设计

2012-07-11 10:49:34

鲍尔默Surface

2014-04-29 10:39:27

CSS3JavaScript

2015-10-14 09:50:11

css3动画模拟

2014-05-26 16:37:10

jQueryCSS3

2014-07-14 12:37:36

jQueryCSS3
点赞
收藏

51CTO技术栈公众号