> 10个漂亮的CSS3+jQuery的Loading加载条动画设计插件
10个漂亮的CSS3+jQuery的Loading加载条动画设计插件
过去，由于加载图片的格式限制(只能使用GIF格式)，设计加载动画不是那么容易。随着技术和浏览器的发展，用CSS3和jQuery就可以方便地设计加载动画，这种方式的高度可定制化以及服务器的进步使得开发者的各种要求得到满足。下面介绍10个实用的方案。
Sonic是一个很小的JS&类&，你可以用它来创建自定义加载动画&&蛇吞尾似的循环动画。
用 CSS3 动画可以实现闪烁跳跃式的正在载入页面效果。
CSS transform(Firefox 3.5+和基于Webkit的浏览器中可用)有很多有趣的功能，如旋转、平移、缩放和倾斜等等都可以用来设计加载动画。
图片是网站中非常重要的部分，如果使用gif图片作为加载动画，则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS，这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。
简洁的 CSS3 代码能生成动画来显示加载进度，在样式类中修改宽度和高度值就可以设置圆圈的大小。
页面加载时，两个不同颜色的圆圈分别向左向右移动，之后再反向移动，一直重复循环。
这是一个免费的在线工具，可以为HTML项目生成各种加载动画，包含旋转和闪烁的效果。
三个简单的 CSS3 加载动画，分别以圆点、线条、方格的形式呈现。
三个 CSS3 循环动画，可以应用于许多领域，例如基于 jQuery 的图像预载。
这个插件能够在加载网页的时候显示加载进度视图，还可以自定义一些参数来设置该视图的颜色、加载图标、背景图片等等。欢迎来到 xinpureZhu 的博客。。。
CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法，就是说一个元素，只能给它定义一个动画效果，不能同时定义。
比如说，我想实现一个这样的动画效果:
一颗星星从上往下滑落，当滑落到指定位置时开始闪烁
这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画)
2. 闪烁 (循环动画)
因为 CSS3 Animation 是不能给星星这个元素同时定义这两个动画效果的，所以我们就只能从其它方向入手了。
思考解决方案
我是这样想的，既然不能同时定义两个动画，那能不能在元素执行完第一个动画时，立即定义第二个动画，然后执行呢？
开始按照思路尝试着解决问题
首先就是怎么才能判断第一个动画执行完了呢？(这是关键，这个问题解决了，问题也就迎刃而解了。。。)
经过一番查找，我发现可以通过 事件监听 的方式，来实现这个功能。(没有了 Google, Baidu 也是可以的)
CSS3 Animation 事件监听
这里仅以 -webkit- 为例，并未测试浏览器兼容 (Chrome, Safari 和 Opera 相应内核浏览器有效)
-webkit-animation 动画其实有三个事件：
开始事件 webkitAnimationStart (标准语法为 AnimationStart)
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
因此根据需求，我需要做的就是 监听 结束事件 webkitAnimationEnd (有其它需求，可以尝试监听其它事件，这里以本例为主)
先给元素定义第一个滑落的动画效果，并且使用 JS 监听动画结束事件，当监听到第一个动画结束时，移除第一个动画效果，重新定义闪烁的动画效果。
逻辑清楚了，接下来就是实现。
主要代码如下:
CSS3 样式:
width: 100
height: 100
background:
.animation1 {
animation: upin 2
-webkit-animation: upin 2
.animation2 {
animation:beat .93
-webkit-animation:beat .93
@keyframes upin{
opacity: 0;
transform: translateY(-100%)
opacity: 1;
transform: translateY(0)
@-webkit-keyframes upin{
opacity: 0;
-webkit-transform: translateY(-100%)
opacity: 1;
-webkit-transform: translateY(0)
@keyframes beat {
0% {-webkit-transform: scale(1)}
15% {-webkit-transform: scale(1.2)}
30% {-webkit-transform: scale(1)}
55% {-webkit-transform: scale(1.1)}
100% {-webkit-transform: scale(1)}
@-webkit-keyframes beat {
0% {-webkit-transform: scale(1)}
15% {-webkit-transform: scale(1.2)}
30% {-webkit-transform: scale(1)}
55% {-webkit-transform: scale(1.1)}
100% {-webkit-transform: scale(1)}
jQuery 代码(请自行添加 Jquery 类库):
&div id=&animationDiv& class=&animation1&&&/div&
&script type=&text/javascript& src=&jquery.min.js&&&/script&
&script type=&text/javascript&&
var animationDiv = $(&#animationDiv&);
animationDiv.bind(&webkitAnimationEnd&, function() {
animationDiv.removeClass(&animation1&);
animationDiv.addClass(&animation2&);
转载请注明： &
or分享 (0)当前位置:&&
本页文章导读:
&&&&?如何在页面上显示当前时间（动态更新）&&&&&&经常在一些网站上看到时间信息，他们是如何做的呢？其实这个不难，可以参考下述代码（个人水平有限，高手请飘过……）
&!-- 欢迎参观斌斌的博客（http://blog.csdn.net/b......&&&&?CSS3中和动画有关的属性transform、transition 和 animation&&&&&&CSS3中和动画有关的属性有三个&transform、transition&和&animation。下面来一一说明:&&&&& transform& &从字面来看transform的释义为改变，使&变形；转换 。这里......&&&&?读jQuery之二十一（队列queue）&&&&&&queue模块在jQuery中分在Effects中，搜索整个库会发现queue也仅在特效模块effects.js中被使用。jQuery抽取出独立的命名空间给queue，说明除了内部Effects模块使用外，客户端程序员可以充分发挥聪明才......
&&&&&&最新IT科技资讯推荐:
[1]如何在页面上显示当前时间（动态更新）
&&&&来源:&互联网& 发布时间:&
经常在一些网站上看到时间信息，他们是如何做的呢？其实这个不难，可以参考下述代码（个人水平有限，高手请飘过……）
&!-- 欢迎参观斌斌的博客（http://blog.csdn.net/binbinxyz） --&
&script type=&text/JavaScript&&
function timer(){
var time=new Date();
document.getElementById(&currentTime&).innerHTML=&当前时间：& +
//document.write(&当前时间：& + time); //因为页面内容被覆盖，所以页面显示当前时间后不会更新
setInterval(&timer()&, 1000);
&div id=&currentTime&&当前时间：时间载入中……&/div&
作者：binbinxyz 发表于 10:54:30 原文链接
阅读：0 评论：0 查看评论
[2]CSS3中和动画有关的属性transform、transition 和 animation
&&&&来源:&
& 发布时间:&
CSS3中和动画有关的属性有三个&transform、transition&和&animation。下面来一一说明:&&&&& transform& &从字面来看transform的释义为改变，使&变形；转换 。这里我们就可以理解为变形。那都能怎么变呢？none 表示不进行变换；rotate 旋转& & && & && transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值（50px 70px）。skew& 扭曲 & & && && & transform:skew(30deg,30deg) &skew(相对x轴倾斜,相对y轴倾斜)scale &缩放 & & && && & transform:scale(2,3) 横向放大2倍，纵向放大3倍。如等比放大写一个参数即可。translate&移动 && &&& transform:translate(50px, 50px);matrix&矩阵变形 & &&基本语法transform: matrix(a, c, b, d, tx, ty);其中a, c, b, d是一个二维矩阵:&
┘a:X轴缩放比例 b:Y轴倾斜 c:Y轴缩放比例 d:X轴倾斜 tx, ty就是就是基于X和Y 坐标重新定位元素。其实就是translate&（tx,ty）&Transition&
W3C标准中对CSS3的transition这是样描述的:&CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。transition主要包含四个属性值：transition-property：&执行变换的属性；transition- duration：
&变换延续的时间：transition-timing-function：
在延续时间段，变换的速率变化；transition- delay&：变换延迟时间下面一一说明这四个属性：transition-property语法：transition-property ： none | all | [ &IDENT& ]transition-property是用来指定当元素其中一个属性改变时执行transition效果，其 主要有以下几个值：none(没有属 性改 变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）；当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。其对应的类型如下：1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；4、integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；6、transform list：详情请参阅：《CSS3 Transform》。7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；8、visibility：离散步骤，在0到1数字范围之内，0表示&隐藏&，1表示完全&显示&,如：visibility；9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；10、gradient：通
[3]读jQuery之二十一（队列queue）
&&&&来源:&
& 发布时间:&
queue模块在jQuery中分在Effects中，搜索整个库会发现queue也仅在特效模块effects.js中被使用。jQuery抽取出独立的命名空间给queue，说明除了内部Effects模块使用外，客户端程序员可以充分发挥聪明才智使用queue来构建非动画API。queue模块向外开放的API分别是挂在$上的$.queue、$.dequeue、$._queueHooks(仅内部)挂在jQuery对象上的有queue、dequeue、delay、clearQueue、promise&按照jQuery的惯例，挂在$上的方法属于低级API，挂在jQuery对象上的才是经常使用的。一般低级API是为高级API服务的，即 queue内部会使用$.queue， dequeue内部会使用$.dequeue。这里实际是实现为一个队列，$.queue是入列，$.dequeue是出列。&一、$.queue这个方法有两个作用，它既是setter，又是getter。第一个参数elem是DOM元素，第二个参数type是字符串，第三个参数data可以是function或数组。1. 设置指定名字的queuefunction cb1() {alert(1)}function cb2() {alert(2)}var arr = [cb1, cb2];$.queue(el, 'mx', cb1); // 第三个参数为function$.queue(el, 'xm', arr); // 第三个参数为数组&2. 这时可以取到存入的callbacksvar cbs1 = $.queue(el, 'mx'); // [cb1]var cbs2 = $.queue(el, 'xm'); // [cb1, cb2]&$.queue内部使用 $._data方法，将数据保存下来。默认type/queueName使用 &"fx" + queue。$.queue的实现很简单，代码不过15行，即取缓存对象queue，如果不存在则初始化为一个空对象，然后将data存入，如果存在则直接将data push到数组中。&二、$.dequeue&将回调函数出列执行，每调用一次仅出列一个，因此当回调有N个时，需要调用$.dequeue方法N次元素才全部出列。$.dequeue的第一个参数是dom元素，第二个参数是queueNamefunction ff1() {console.log(1)}function ff2() {console.log(2)}function ff3() {console.log(3)}var p = $('p')[0];$.queue(p, 'mx1', ff1);$.queue(p, 'mx1', ff2);$.queue(p, 'mx1', ff3);// 每2秒调用一次$.dequeue，依次输出1,2,3setInterval(function() {$.dequeue(p, 'mx1') }, 2000);&回调函数的上下文是dom元素，参数是next函数和hooks对象var p = $('p')[0];function func(next, hooks) {
console.log(this);
console.log(next);
console.log(hooks);}$.queue(p, 'mx', func);$.dequeue(p, 'mx'); // p, function, [object Object]&next内部仍然调用$.dequeue，这样可以接着执行队列中的下一个callback。$.dequeue里的hooks是当队列里所有的callback都执行完后(此时startLength为0)进行最后的一个清理工作，if ( !startLength && hooks ) {hooks.empty.fire();}hooks.empty是一个jQuery.Callbacks对象，而它则是定义在$._queueHooks里_queueHooks: function( elem, type ) {var key = type + "queueHooks";return jQuery._data( elem, key ) || jQuery._data( elem, key, {empty: jQuery.Callbacks("once memory").add(function() {jQuery._removeData( elem, type + "queue" );jQuery._removeData( elem, key );})});}&以上就是queue的全部了，本质是利用Array的push和shift来完成先进先出(First In First Out)，但这里有个缺陷，jQuery的queue从1.1开始就是为effects模块服务的，因此queue里存的都是function。个人觉得如果只存function，应该对data参数做个严格类型判断，如果不是function则抛异常。但目前的版本没有做严格判断，如果我存的不是function，这样dequeue时会报错。如下var p = $('p')[0];$.queue(p, 'mx1', {}); // 注意第三个参数是对象，非function$.dequeue(p, 'mx1'); // fn.call 报错，因为fn不是function&三、queue知道了$.queue，queue就很好理解了，它无非是内部调用了下$.queue。queue比$.queue 少了第一个参数，内部使用this代替第一个参数。function ff1() {console.log(1)}function ff2() {console.log(2)}function ff3() {console.log(3)}var $p = $('p');$p.queue('mx', ff1);$p.queue('mx', ff2);$p.queue('mx', ff3);这样，三个function就入列了，列名是"mx"。 取队列元素只需传一个列名如"mx"var queue = $p.queue('mx'); // [ff1, ff2, ff3]&还有个技巧就是，如果使用jQuery默认的队列"fx"，可以只传datafunction ff1() {console.log(1)}function ff2() {console.log(2)}function ff3() {console.log(3)}var $p = $('p');$p.queue(ff1);$p.queue(ff2);$p.queue(ff3);另外一点，当使用默认列名"fx"时，它会调用$.dequeue出列执行下，源码如下if ( type === "fx" && queue[0] !== "inprogress" ) {jQuery.dequeue( this, type );}&四、dequeuedequeue则更是未添加任何特殊处理，直接调用的$.dequeue，见源码dequeue: function( type ) {return this.each(function() {jQuery.dequeue( this, type );});},&五、delaydelay用来延迟后续添加的callback的执行，第一个参数time是延迟时间(另可使用"slow"和"fast")，第二个是队列名。function cb() {
console.log(1);
}var $p = $('p');$p.delay(2000, 'mx').queue('mx', cb); $p.dequeue('mx'); // 2秒后输出1如果是这样function ff1() {console.log(1)}function ff2() {console.log(2)}var $p = $('p');$p.queue('mx', ff1);$p.delay(4000, 'mx');$p.queue('mx', ff2);$p.dequeue('mx'); // 立即输出1$p.dequeue('mx'); // 4秒后输出2&六、clearQueue顾名思义，清空所有队列。没什么好说的，源码如下，直接使用一个空数组覆盖之前的数组队列了。clearQueue: function( type ) {return this.queue( type || "fx", [] );},　　七、promise这个方法返回一个promise对象，promise对象既是前面提到的Deferred对象的阉割版。你可以使用done、fail、progress添加，但不能触发。用在queue模块里有特殊意义，比如done它指queue里所有function都执行后才执行done添加的。如function ff1() {alert(1)}function ff2() {alert(2)}function succ() {alert('done')}$body = $('body')$body.queue('mx', ff1);$body.queue('mx', ff2);var promise = $body.promise('mx');promise.done(succ);setInterval(function() {$body.dequeue('mx') // 先弹出1,2，最后是"done"}, 1500)&注：阅读版本为1.9.1&本文链接
最新技术文章:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！
(C)2012-,站长邮箱:www_169it_(请将#改为@)你所不知的 CSS ::before 和 ::after 伪元素用法 - 钉子の次元