css3制作的载入动画效果，效果很震撼！ 
javascript特效
演示地址：http://www.huiyi8.com/jiaoben/

[代码] [JavaScript]代码

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3载入中动画</title>
<style type="text/css">
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 */
     border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: rgb(0, 0, 0) !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; min-height: inherit !important; color: grey !important; background: none !important;">#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;}
}
body{ background:#333;}
/***************************************************************/
#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%;}
}
/***********************************************************************/
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 {
     border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: rgb(0, 0, 0) !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; min-height: inherit !important; color: grey !important; background: none !important;">#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; }
}
</style>
</head>
<body>
<ul id="progress">
  <li>
    <div id="layer1" class="ball"></div>
    <!-- layer1 control delay animation By:www.iiwnet.com / 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>
<div id="content">
<span class="expand"></span>
</div>
<p>更多>><a href='http://www.iiwnet.com' >JS特效</a> </p>
<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>
</body>
</html>

转载于:https://www.cnblogs.com/lhrs/p/4119014.html

css3制作的载入动画效果，效果很震撼！相关推荐

  1. html和css3 js 3D 相框动画翻转效果id1084-网页前端设计

    html和css3 js 3D 相框动画翻转效果id1084-网页前端设计 源码下载地址 在新演示地址 <!DOCTYPE html> <html lang="en&quo ...

  2. css3制作左右拉伸动画菜单

    微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...

  3. 满屏飞舞的心HTML动画,CSS3制作蝴蝶飞舞动画

    CSS3制作蝴蝶飞舞动画 body{ background-color: lightblue; } #container { perspective: 600px; perspective-origi ...

  4. HTML绘制齿轮,使用css3制作齿轮loading动画效果

    HTML 首先在页面中引入font-awesome文件. 然后在放置动画的位置加上HTML结构: CSS样式 然后通过下面的CSS样式来制作齿轮的动画效果. #loader-wrapper { wid ...

  5. 纯CSS3制作皮卡丘动画壁纸

    前言 明天就放假了,趁着今晚的空挡时间来写这篇博客--这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以 ...

  6. CSS3制作波浪的动画效果

    一.效果展示 首先展示一下制作的效果,这里以图片代替. 二.原始代码 主要是通过css3的动画效果,以及html的定位布局共同实现的. 实现代码如下: css部分,样式布局及动画设计: .contai ...

  7. html音乐跳动的线,利用CSS3制作跳动音乐频谱跳动效果

    [摘要] CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果. 在一个网站上看到"直播中"的提示标题, ...

  8. html 图片选中效果,使用html5 svg和css3制作神奇的图片hover效果

    如果你曾经访问过新版的Christmas Experiments网站,那么你一定被网站上的日历效果所吸引.今天我们将和大家一起来研究如何使用SVG和Snap.svg来实现这种效果.思路是用svg创建一 ...

  9. css3制作炫酷导航栏效果 转

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

  10. html炫酷的导航栏效果,css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

最新文章

  1. WCF技术剖析之三十：一个很有用的WCF调用编程技巧[下篇]
  2. postman自动打开_postman第1讲-开篇：介绍与安装
  3. S如何边缘控制_如何用尼康佳能索尼人像标头50mm/1.8拍出大片的效果？
  4. Servlet_生命周期详解
  5. MYSQL 的集群
  6. 【poj2096】Collecting Bugs 期望dp
  7. 海康威视面试-java应用开发
  8. 单片机c语言 arduino,单片机C语言程序设计实训100例——基于Arduino+Proteus仿真
  9. 801机械设计2017题签
  10. 如何在家优雅地使用 Sci-Hub 免费下载外文文献
  11. stream流转toMap的使用以及Key重复的解决
  12. 分享一个在沪深300下获得146.56%超额收益的策略
  13. 使用x64编译fastdb报错
  14. 台湾大学林轩田机器学习技法课程学习笔记8 -- Adaptive Boosting
  15. 【font-spider】网页中引用字体文件过大的解决办法，网页字体文件压缩
  16. 软著申请个人实名认证流程
  17. 不会哄女朋友？来，教你爬搞笑图片
  18. 写一个抖音协议 价格你定
  19. python之转义字符
  20. 用Socket实现点对点的文件传输

热门文章

  1. 收藏 | NLP论文、代码、博客、视频资源（LSTM，指针模型，Attention， ELMo，GPT，BERT、多任务学习等）...
  2. 说来你可能不信，穿越后男狐狸逼我好好学习…
  3. 每日算法系列【LeetCode 1186】删除一次得到子数组最大和
  4. 具体数学-第7课（取整基础）
  5. TSNE—聚类结果可视化
  6. 李宏毅自然语言处理——成分句法分析
  7. 曾经的8848，远离真实的代价
  8. operator 模块详解
  9. ubuntu以安装包方式安装jdk13
  10. python一维数组聚类