css3 loading: 3款漂亮的CSS3 Loading动画实例教程

HTML
第1个例子中的HTML标记非常简单，我们在页面上创建了一个ul列表标记，并在其内部创建了几个div来控制它的总体进度动画，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		 <ul id="progress">
    <li>
    <div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect -->
    <div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect  -->
    </li>
    <li>
    <div id="layer2" class="ball"></div>
    <div id="layer8" class="pulse"></div>
    </li>
    <li>
    <div id="layer3" class="ball"></div>
    <div id="layer9" class="pulse"></div>
    </li>
    <li>
    <div id="layer4" class="ball"></div>
    <div id="layer10" class="pulse"></div>
    </li>
    <li>
    <div id="layer5" class="ball"></div>
    <div id="layer11" class="pulse"></div>
    </li>
</ul>

CSS
没有什么不同的，我们仅仅为ul标记创建了图形动画，请注意中间过程中的特别的动画效果，这个效果要归功于CSS3的延迟动画特性，CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89		 ul#progress {
    list-style:none;
    width:125px;
    margin:0 auto;
    padding-top:50px;
    padding-bottom:50px;
}
 
ul#progress li { /* Style your list */
    float:left;
    position:relative;
    width:15px;
    height:15px;
    border:1px solid #fff;
    border-radius:50px;
    margin-left:10px;
    border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
    background:#000;
}
 
ul#progress li:first-child { margin-left:0; } /* Remove the margin first li element */
 
.ball { /* Style your ball and set the animation */
    background-color:#2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
 
    width:15px;
    height:15px;
    border-radius:50px;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    
    -moz-animation:loading 1s linear forwards;
    -webkit-animation:loading 1s linear forwards;
}
 
.pulse { /* Style your second ball to create the amazing effects */
    width:15px;
    height:15px;
    border-radius:30px;
    border: 1px solid #00c6ff;
    box-shadow: 0 0 5px #00c6ff;
    position:absolute;
    top:-1px;
    left:-1px;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    
    -webkit-animation:pulse 1s ease-out;
    -moz-animation:pulse 1s ease-out;
}
 
/* Control Layers */
#layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
 
#layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
#layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
 
@-moz-keyframes loading {
    0%{-moz-transform:scale(0,0);}
    100%{-moz-transform:scale(1,1);}   
}
 
@-webkit-keyframes loading {
    0%{-webkit-transform:scale(0,0);}
    100%{-webkit-transform:scale(1,1);}
}
 
@-moz-keyframes pulse {
    0%   {-moz-transform: scale(0);opacity: 0;}
    10%  {-moz-transform: scale(1);opacity: 0.5;}
    50%  {-moz-transform: scale(1.75);opacity: 0;}
    100% {-moz-transform: scale(0);opacity: 0;} 
}
 
@-webkit-keyframes pulse {
    0%   {-webkit-transform: scale(0);opacity: 0;}
    10%  {-webkit-transform: scale(1);opacity: 0.5;}
    50%  {-webkit-transform: scale(1.75);opacity: 0;}
    100% {-webkit-transform: scale(0);opacity: 0;}   
}

第2个CSS3 Loading动画例子
HTML
在第2个例子中，我们将会创建一个loading进度条，仅仅是创建一个宽度为100%的容器，然后在里面放一个class为expand的span标记，通过CSS3动画进度条就能逐渐充满整个屏幕，代码如下：

1
2
3		 <div id="content">
<span class="expand"></span>
</div>

CSS
这个样式看起来比上一个简单很多，这是最基本的设置，你可以根据你的需要改变它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28		 #content {
    width:100%; /* Full Width */
    height:5px;
    margin:50px auto;
    background:#000;
}
 
.expand {
    width:100%;
    height:1px;
    margin:2px 0;
    background:#2187e7;
    position:absolute;
    box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
        -moz-animation:fullexpand 10s ease-out;
    -webkit-animation:fullexpand 10s ease-out;
}
 
/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;} 
}
 
@-webkit-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;} 
}

第3个CSS3 Loading动画例子
HTML
在最后一个例子中，我们利用opacity属性重新创建了loading进度条，这里我们将用控制层控制其准确的动画时序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32		 <ul id="loadbar">
    <li>
    <div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar  -->
    </li>
    <li>
    <div id="layerFill2" class="bar"></div>
    </li>
    <li>
    <div id="layerFill3" class="bar"></div>
    </li>
    <li>
    <div id="layerFill4" class="bar"></div>
    </li>
    <li>
    <div id="layerFill5" class="bar"></div>
    </li>
    <li>
    <div id="layerFill6" class="bar"></div>
    </li>
    <li>
    <div id="layerFill7" class="bar"></div>
    </li>
    <li>
    <div id="layerFill8" class="bar"></div>
    </li>
    <li>
    <div id="layerFill9" class="bar"></div>
    </li>
    <li>
    <div id="layerFill10" class="bar"></div>
    </li>
</ul>

CSS
你看到的效果和第1个差不多，但重要的是你懂得了如何用CSS来制作如此美妙的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50		 ul#loadbar {
    list-style:none;
    width:140px;
    margin:0 auto;
    padding-top:50px;
    padding-bottom:75px;
}
ul#loadbar li {
    float:left;
    position:relative;
    width:11px;
    height:26px;
    margin-left:1px;
    border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
    background:#000;
}
 
ul#loadbar li:first-child { margin-left:0; }
 
.bar {
    background-color:#2187e7; 
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    width:11px;
    height:26px;
    opacity:0;
    -webkit-animation:fill .5s linear forwards;
    -moz-animation:fill .5s linear forwards;
}
 
#layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
#layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
#layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
#layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
#layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }
 
@-moz-keyframes fill {
    0%{ opacity:0; }
    100%{ opacity:1; } 
}
 
@-webkit-keyframes fill {
    0%{ opacity:0; }
    100%{ opacity:1; } 
}

本文链接http://www.cxybl.com/html/wyzz/CSS/20130705/38908.html

时间： 2024-12-01 14:37:19

css3 loading: 3款漂亮的CSS3 Loading动画实例教程的相关文章

3款漂亮的CSS3 Loading动画实例教程

   HTML 第1个例子中的HTML标记非常简单,我们在页面上创建了一个ul列表标记,并在其内部创建了几个div来控制它的总体进度动画,代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <ul id="progress">     <li>     <div id="layer1" class="ball"></div>

CSS3中遮罩使用实例教程

Css遮罩是由苹果公司添加到webkit浏览器引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个通道以及在每个像素上定义的颜色组成的.但是在他们之上还有第四个通道,alpha通道,通过亮度定义每个像素上的透明度.白色意味着不透明,黑色意味着透明,介于黑白之间的灰色表示半透明.你可以看到下面的图片 给一个html元素使用css遮罩,就会这样处理.不用给图片应用一个alpha通道,只需要给一个图片运用一个

12款有助于简化CSS3开发的工具

网站开发者能通过CSS3为网站设计增添很多时尚元素,CSS3 对CSS规范做了很大的改进.现在,本文将为你介绍12款有助于简化CSS3开发的工具. 1.CSS3 Pie: 允许在IE上使用CSS3绝大部分的酷炫功能. 2.CSS3 Builder: 通过该工具,你可以用类似应用photoshop特效的界面来设计复杂的CSS3 box模型.非常节约时间. 3.CSS3 Drop shadow generatr: 通过滑块功能直观的设计阴影.只需复制已被自动创建的CSS代码并粘贴到CSS文件中便可.

HTML5 五彩圆环Loading加载动画实现教程

原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈的时候还有淡入淡出的效果.每一个圆环不停地旋转,从而实现加载动画的效果.首先你可以看看效果演示: 你也可以在这里查看在线演示 下面分享一下这款HTML5 Loading动画的实现过程,主要是HTML代码和CSS3代码,以及初始化的JS代码. 首先是HTML代码,只定义一个Loading容器,非常简单

16 个使用 CSS3 和 jQuery 制作的加载中动画

spin.js CSS3 Loading Animation Loop CSS3 Loading Animation CanvasLoader Creator Flickr Style Loading Animation Using JQuery CSS Loading Animation Circle Style Loading CSS spinners and bars generator for AJAX & JQuery Ajax Style Loading Animation in C

html5 css3实例教程

 之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. 实现的代码. html代码: 代码如下: <svg version="1.1" id="Layer_1" xmlns="http://www.jb51.net/2000/svg" xmlns:xlink="http://www..j

CSS3实例教程代码:简单制作遨游浏览器LOGO

文章简介:CSS3实例教程代码:简单制作遨游浏览器LOGO. <!DOCTYPE HTML> <html> <head> <title>LOGO</title> <style type="text/css"> * {margin:0; padding:0} .main {width:800px; margin:50px auto 0}  .main_wrapper {width:240px; height:240p

CSS3实例教程:hover、active和:focus伪选择器

文章简介:CSS3实例教程:hover.active和:focus伪选择器. CSS3的伪类选择器就是多,今天我们来学习新的伪类选择器--UL状态伪类选择器.这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用,在默认状态下无效. 今天我们先来接触:hover.active和:focus这三种状态伪类选择器. :hover选择器.:active选择器和:focus选择器 :hover选择器:当鼠标悬停在所指定的元素上时所使用的样式: :active选择器:当所指定的元

CSS3实例教程:盒模型添加阴影属性box

文章简介:我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 相关文章:CSS3教程:网页文字阴影属性text-shadow box-shadow: 此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个