CSS3 loading效果全
2024-05-01 01:38:35
梦想天空
关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点：yyyweb.com 欢迎围观：）
使用 CSS3 实现超炫的 Loading（加载）动画效果
SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）
您可能感兴趣的相关文章
- 你想不到的！CSS 实现的各种球体效果
- 精心挑选的在线 CSS3 代码生成工具
- 14个支持响应式设计的流行前端开发框架
- 推荐10个特别方便的 CSS3 开发工具
- 推荐收集的40款优秀的免费 CSS 工具
Loading 动画效果一
HTML 代码：
|
1
2
3
4
5
6
7
|
<div class = "spinner" >
<div class = "rect1" ></div>
<div class = "rect2" ></div>
<div class = "rect3" ></div>
<div class = "rect4" ></div>
<div class = "rect5" ></div>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
.spinner {
margin : 100px auto ;
width : 50px ;
height : 60px ;
text-align : center ;
font-size : 10px ;
}
.spinner > div {
background-color : #67CF22 ;
height : 100% ;
width : 6px ;
display : inline- block ;
-webkit-animation: stretchdelay 1.2 s infinite ease-in-out;
animation: stretchdelay 1.2 s infinite ease-in-out;
}
.spinner .rect 2 {
-webkit-animation-delay: -1.1 s;
animation-delay: -1.1 s;
}
.spinner .rect 3 {
-webkit-animation-delay: -1.0 s;
animation-delay: -1.0 s;
}
.spinner .rect 4 {
-webkit-animation-delay: -0.9 s;
animation-delay: -0.9 s;
}
.spinner .rect 5 {
-webkit-animation-delay: -0.8 s;
animation-delay: -0.8 s;
}
@-webkit-keyframes stretchdelay {
0% , 40% , 100% { -webkit-transform: scaleY( 0.4 ) }
20% { -webkit-transform: scaleY( 1.0 ) }
}
@keyframes stretchdelay {
0% , 40% , 100% {
transform: scaleY( 0.4 );
-webkit-transform: scaleY( 0.4 );
} 20% {
transform: scaleY( 1.0 );
-webkit-transform: scaleY( 1.0 );
}
}
|
Loading 动画效果二
HTML 代码：
|
1
|
<div class = "spinner" ></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
|
.spinner {
width : 60px ;
height : 60px ;
background-color : #67CF22 ;
margin : 100px auto ;
-webkit-animation: rotateplane 1.2 s infinite ease-in-out;
animation: rotateplane 1.2 s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective( 120px ) }
50% { -webkit-transform: perspective( 120px ) rotateY( 180 deg) }
100% { -webkit-transform: perspective( 120px ) rotateY( 180 deg) rotateX( 180 deg) }
}
@keyframes rotateplane {
0% {
transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg);
-webkit-transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg)
} 50% {
transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg);
-webkit-transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg)
} 100% {
transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg);
-webkit-transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg);
}
}
|
Loading 动画效果三
HTML 代码：
|
1
2
3
4
|
<div class = "spinner" >
<div class = "double-bounce1" ></div>
<div class = "double-bounce2" ></div>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
|
.spinner {
width : 60px ;
height : 60px ;
position : relative ;
margin : 100px auto ;
}
.double-bounce 1 , .double-bounce 2 {
width : 100% ;
height : 100% ;
border-radius: 50% ;
background-color : #67CF22 ;
opacity: 0.6 ;
position : absolute ;
top : 0 ;
left : 0 ;
-webkit-animation: bounce 2.0 s infinite ease-in-out;
animation: bounce 2.0 s infinite ease-in-out;
}
.double-bounce 2 {
-webkit-animation-delay: -1.0 s;
animation-delay: -1.0 s;
}
@-webkit-keyframes bounce {
0% , 100% { -webkit-transform: scale( 0.0 ) }
50% { -webkit-transform: scale( 1.0 ) }
}
@keyframes bounce {
0% , 100% {
transform: scale( 0.0 );
-webkit-transform: scale( 0.0 );
} 50% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
}
}
|
Loading 动画效果四
HTML 代码：
+ View Code
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
|
.spinner {
margin : 100px auto ;
width : 32px ;
height : 32px ;
position : relative ;
}
.cube 1 , .cube 2 {
background-color : #67CF22 ;
width : 30px ;
height : 30px ;
position : absolute ;
top : 0 ;
left : 0 ;
-webkit-animation: cubemove 1.8 s infinite ease-in-out;
animation: cubemove 1.8 s infinite ease-in-out;
}
.cube 2 {
-webkit-animation-delay: -0.9 s;
animation-delay: -0.9 s;
}
@-webkit-keyframes cubemove {
25% { -webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 ) }
50% { -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg) }
75% { -webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 ) }
100% { -webkit-transform: rotate( -360 deg) }
}
@keyframes cubemove {
25% {
transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 );
-webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 );
} 50% {
transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg);
-webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg);
} 50.1% {
transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg);
-webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg);
} 75% {
transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 );
-webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 );
} 100% {
transform: rotate( -360 deg);
-webkit-transform: rotate( -360 deg);
}
}
|
Loading 动画效果五
HTML 代码：
+ View Code
CSS 代码：
+ View Code
Loading 动画效果六
HTML 代码：
|
1
2
3
4
5
|
<div class= "spinner" >
<div class= "bounce1" ></div>
<div class= "bounce2" ></div>
<div class= "bounce3" ></div>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
.spinner {
margin : 100px auto 0 ;
width : 150px ;
text-align : center ;
}
.spinner > div {
width : 30px ;
height : 30px ;
background-color : #67CF22 ;
border-radius: 100% ;
display : inline- block ;
-webkit-animation: bouncedelay 1.4 s infinite ease-in-out;
animation: bouncedelay 1.4 s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both ;
animation-fill-mode: both ;
}
.spinner .bounce 1 {
-webkit-animation-delay: -0.32 s;
animation-delay: -0.32 s;
}
.spinner .bounce 2 {
-webkit-animation-delay: -0.16 s;
animation-delay: -0.16 s;
}
@-webkit-keyframes bouncedelay {
0% , 80% , 100% { -webkit-transform: scale( 0.0 ) }
40% { -webkit-transform: scale( 1.0 ) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
transform: scale( 0.0 );
-webkit-transform: scale( 0.0 );
} 40% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
}
}
|
Loading 动画效果七
HTML 代码：
|
1
|
<div class= "spinner" ></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
29
|
.spinner {
width : 40px ;
height : 40px ;
margin : 100px auto ;
background-color : #333 ;
border-radius: 100% ;
-webkit-animation: scaleout 1.0 s infinite ease-in-out;
animation: scaleout 1.0 s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale( 0.0 ) }
100% {
-webkit-transform: scale( 1.0 );
opacity: 0 ;
}
}
@keyframes scaleout {
0% {
transform: scale( 0.0 );
-webkit-transform: scale( 0.0 );
} 100% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
opacity: 0 ;
}
}
|
Loading 动画效果八
HTML 代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<div class= "spinner" >
<div class= "spinner-container container1" >
<div class= "circle1" ></div>
<div class= "circle2" ></div>
<div class= "circle3" ></div>
<div class= "circle4" ></div>
</div>
<div class= "spinner-container container2" >
<div class= "circle1" ></div>
<div class= "circle2" ></div>
<div class= "circle3" ></div>
<div class= "circle4" ></div>
</div>
<div class= "spinner-container container3" >
<div class= "circle1" ></div>
<div class= "circle2" ></div>
<div class= "circle3" ></div>
<div class= "circle4" ></div>
</div>
</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
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
|
.spinner {
margin : 100px auto ;
width : 20px ;
height : 20px ;
position : relative ;
}
.container 1 > div, .container 2 > div, .container 3 > div {
width : 6px ;
height : 6px ;
background-color : #333 ;
border-radius: 100% ;
position : absolute ;
-webkit-animation: bouncedelay 1.2 s infinite ease-in-out;
animation: bouncedelay 1.2 s infinite ease-in-out;
-webkit-animation-fill-mode: both ;
animation-fill-mode: both ;
}
.spinner .spinner-container {
position : absolute ;
width : 100% ;
height : 100% ;
}
.container 2 {
-webkit-transform: rotateZ( 45 deg);
transform: rotateZ( 45 deg);
}
.container 3 {
-webkit-transform: rotateZ( 90 deg);
transform: rotateZ( 90 deg);
}
.circle 1 { top : 0 ; left : 0 ; }
.circle 2 { top : 0 ; right : 0 ; }
.circle 3 { right : 0 ; bottom : 0 ; }
.circle 4 { left : 0 ; bottom : 0 ; }
.container 2 .circle 1 {
-webkit-animation-delay: -1.1 s;
animation-delay: -1.1 s;
}
.container 3 .circle 1 {
-webkit-animation-delay: -1.0 s;
animation-delay: -1.0 s;
}
.container 1 .circle 2 {
-webkit-animation-delay: -0.9 s;
animation-delay: -0.9 s;
}
.container 2 .circle 2 {
-webkit-animation-delay: -0.8 s;
animation-delay: -0.8 s;
}
.container 3 .circle 2 {
-webkit-animation-delay: -0.7 s;
animation-delay: -0.7 s;
}
.container 1 .circle 3 {
-webkit-animation-delay: -0.6 s;
animation-delay: -0.6 s;
}
.container 2 .circle 3 {
-webkit-animation-delay: -0.5 s;
animation-delay: -0.5 s;
}
.container 3 .circle 3 {
-webkit-animation-delay: -0.4 s;
animation-delay: -0.4 s;
}
.container 1 .circle 4 {
-webkit-animation-delay: -0.3 s;
animation-delay: -0.3 s;
}
.container 2 .circle 4 {
-webkit-animation-delay: -0.2 s;
animation-delay: -0.2 s;
}
.container 3 .circle 4 {
-webkit-animation-delay: -0.1 s;
animation-delay: -0.1 s;
}
@-webkit-keyframes bouncedelay {
0% , 80% , 100% { -webkit-transform: scale( 0.0 ) }
40% { -webkit-transform: scale( 1.0 ) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
transform: scale( 0.0 );
-webkit-transform: scale( 0.0 );
} 40% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
}
}
|
完整源码下载
您可能感兴趣的相关文章
- 24款非常实用的CSS3工具终极收藏
- 史上最全的浏览器 CSS & JS Hack 手册
- 10套精美的免费网站后台管理系统模板
- 让你的网站变成响应式的3个简单步骤
- 基于 Bootstrap 的响应式后台管理模板
本文链接：分享8个使用 CSS3 实现的超炫的网页加载动画效果
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
推荐博文
- Web 前端工程师和设计师必读精华文章推荐
- 酷！15个精美的 HTML5 单页网站作品欣赏
- 炫！35个让人惊讶的 CSS3 动画效果演示
- 赞！30个与众不同的优秀视差滚动效果网站
- 靓å！25个优秀的国外单页网站设计作品欣赏
- 帅！8个惊艳的 HTML5 和 JavaScript 特效
- 顶！35个很漂亮的国外 Flash 网站作品欣赏
- 哇！34个漂亮网站和应用程序后台管理界面
本博客新站点 ◆ 前端里 ◆ 欢迎围观：）
作者：山边小溪
主站：yyyweb.com 记住啦：）
欢迎任何形式的转载，但请务必注明出处。
分类: CSS3, 网页设计
标签: CSS3动画, SpinKit, Loading动画, 网页加载动画
好文要顶 关注我 收藏该文
梦想天空（山边小溪）
关注 - 17
粉丝 - 12425
关注 - 17
粉丝 - 12425
+加关注
86
2
« 上一篇： 你知道网页设计中最常用的15张图片素材吗？
» 下一篇： 经典网页设计：关注用户体验的20个华丽网站
» 下一篇： 经典网页设计：关注用户体验的20个华丽网站
posted @ 2013-12-28 15:17 梦想天空（山边小溪） 阅读(274981) 评论(47) 编辑 收藏
发表评论
#1楼 2013-12-28 16:46 | 海农
强大·
支持(0) 反对(0)
#2楼 2013-12-28 19:47 | 2J
真强大
就是有些浏览器用不了...
就是有些浏览器用不了...
支持(0) 反对(0)
#3楼 2013-12-28 20:38 | 破浪远航
CSS3 动画效果的确不错
支持(0) 反对(0)
#4楼 2013-12-28 20:39 | 金姗
真的很炫！
支持(0) 反对(0)
#5楼 2013-12-28 21:21 | 任意球
来支持下
支持(0) 反对(0)
#6楼 2013-12-28 21:25 | 任意球
我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
支持(0) 反对(0)
#7楼 2013-12-28 22:24 | 醉温柔
太厉害了
支持(0) 反对(0)
#8楼 2013-12-28 23:11 | Rising_Sun
相当不错
支持(0) 反对(0)
#9楼 2013-12-29 00:14 | haiziguo
good
支持(0) 反对(0)
#10楼 2013-12-29 00:23 | wenbolwm
效果很不错
支持(0) 反对(0)
#11楼 2013-12-29 00:26 | 狼狼的蓝胖子
@ 任意球
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
将进度条隐藏掉就好了啊，你是后台直接输出数据的吗？
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
将进度条隐藏掉就好了啊，你是后台直接输出数据的吗？
支持(0) 反对(0)
#12楼 2013-12-29 04:49 | 冰麟轻武
说实话,作为技术研究还不错,但是如果真的用在项目中的话不如一个gif来的实用
支持(1) 反对(0)
#13楼 2013-12-29 11:43 | Mr.Harry
挺好看的东东..
支持(0) 反对(0)
#14楼 2013-12-30 09:01 | 大蘋果
不错蛮好看的
支持(0) 反对(0)
#15楼 [ 楼主] 2013-12-30 15:57 | 梦想天空（山边小溪）
@ 戢俊建
引用真强大就是有些浏览器用不了...
用高端浏览器，享高端享受，哈哈
引用真强大就是有些浏览器用不了...
用高端浏览器，享高端享受，哈哈
支持(1) 反对(0)
#16楼 [ 楼主] 2013-12-30 15:58 | 梦想天空（山边小溪）
@ 任意球
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
可以在onload事件里隐藏或删除进度表。
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
可以在onload事件里隐藏或删除进度表。
支持(0) 反对(0)
#17楼 [ 楼主] 2013-12-30 15:59 | 梦想天空（山边小溪）
@ 冰麟轻武
引用说实话,作为技术研究还不错,但是如果真的用在项目中的话不如一个gif来的实用
移动端还是可以考虑用下 CSS3 的。
引用说实话,作为技术研究还不错,但是如果真的用在项目中的话不如一个gif来的实用
移动端还是可以考虑用下 CSS3 的。
支持(0) 反对(0)
#18楼 [ 楼主] 2013-12-30 15:59 | 梦想天空（山边小溪）
@ 醉温柔
@金姗
@两美码农
@戢俊建
@hinong
谢谢大家支持！
@金姗
@两美码农
@戢俊建
@hinong
谢谢大家支持！
支持(0) 反对(0)
#19楼 [ 楼主] 2013-12-30 16:00 | 梦想天空（山边小溪）
@ 大蘋果
@Mr.Harry
@wenbolwm
@haiziguo
@Rising_Sun
多谢支持！：）
@Mr.Harry
@wenbolwm
@haiziguo
@Rising_Sun
多谢支持！：）
支持(0) 反对(0)
#20楼 2013-12-30 20:27 | 白树
好东西，学习了
支持(0) 反对(0)
#21楼 [ 楼主] 2013-12-31 13:33 | 梦想天空（山边小溪）
@ 白树
引用好东西，学习了
多谢支持：）
引用好东西，学习了
多谢支持：）
支持(0) 反对(0)
#22楼 2014-01-01 23:17 | 任意球
博主，您的这篇文章我可以拿去其他地方分享么，我会说明出处并带您的链接
支持(0) 反对(0)
#23楼 [ 楼主] 2014-01-02 09:21 | 梦想天空（山边小溪）
@ 任意球
引用博主，您的这篇文章我可以拿去其他地方分享么，我会说明出处并带您的链接
可以啊：）
引用博主，您的这篇文章我可以拿去其他地方分享么，我会说明出处并带您的链接
可以啊：）
支持(0) 反对(0)
#24楼 2014-01-02 10:14 | 兔子先生不掉毛好么
谢谢分享 ；）
支持(0) 反对(0)
#25楼 [ 楼主] 2014-01-02 12:12 | 梦想天空（山边小溪）
@ 兔子先生不掉毛好么
引用谢谢分享 ；）
不用谢，欢迎常来关注！
引用谢谢分享 ；）
不用谢，欢迎常来关注！
支持(0) 反对(0)
#26楼 2014-01-06 15:34 | geass..
请教下，跟gif比有什么优势？
支持(0) 反对(0)
#27楼 2014-01-07 09:21 | Treenew Lyn
@ geass..
有意思。
和GIF没什么优势。在国内一点P优势都没。
有意思。
和GIF没什么优势。在国内一点P优势都没。
支持(0) 反对(0)
#28楼 [ 楼主] 2014-01-08 22:46 | 梦想天空（山边小溪）
@ geass..
引用请教下，跟gif比有什么优势？
使用 CSS 来做可以减少HTTP图片请求，另外可以任意放大缩小。
引用请教下，跟gif比有什么优势？
使用 CSS 来做可以减少HTTP图片请求，另外可以任意放大缩小。
支持(0) 反对(0)
#29楼 [ 楼主] 2014-01-08 22:47 | 梦想天空（山边小溪）
@ Treenew Lyn
引用@geass..有意思。
和GIF没什么优势。在国内一点P优势都没。
这个得看项目啊，哈哈。
像移动Web项目用 CSS3 来做还是很不错的方案。
引用@geass..有意思。
和GIF没什么优势。在国内一点P优势都没。
这个得看项目啊，哈哈。
像移动Web项目用 CSS3 来做还是很不错的方案。
支持(0) 反对(0)
#30楼 2014-05-09 21:44 | xujihui
很好的资源，请注明出处 http://tobiasahlin.com/spinkit/
支持(0) 反对(0)
#31楼 [ 楼主] 2014-05-09 22:08 | 梦想天空（山边小溪）
@ xujihui
引用很好的资源，请注明出处 http://tobiasahlin.com/spinkit/
开头就说了是SpinKit加载动画效果。
引用很好的资源，请注明出处 http://tobiasahlin.com/spinkit/
开头就说了是SpinKit加载动画效果。
支持(0) 反对(0)
#32楼 2014-05-09 23:10 | xujihui
@ Treenew Lyn
为什么没优势？建议你看一下项目原址
“An easy way to provide a fallback animation is to check for support for the animation property, and replace the spinner with a GIF if it's not supported.”
为什么没优势？建议你看一下项目原址
“An easy way to provide a fallback animation is to check for support for the animation property, and replace the spinner with a GIF if it's not supported.”
支持(0) 反对(0)
#33楼 2014-08-20 16:44 | 刘宏玺
效果超赞
支持(0) 反对(0)
#34楼 [ 楼主] 2014-08-21 12:41 | 梦想天空（山边小溪）
@ 刘宏玺
引用效果超赞
谢谢！
引用效果超赞
谢谢！
支持(0) 反对(0)
#35楼 2014-09-11 17:34 | Langjun
赞，很漂亮！！
支持(0) 反对(0)
#36楼 [ 楼主] 2014-09-11 19:49 | 梦想天空（山边小溪）
@ Langjun
引用赞，很漂亮！！
谢谢支持！
引用赞，很漂亮！！
谢谢支持！
支持(0) 反对(0)
#37楼 2015-01-14 10:31 | bugong
mark
支持(0) 反对(0)
#38楼 2015-03-16 15:40 | webfby
m
支持(0) 反对(0)
#39楼 [ 楼主] 2015-03-16 21:33 | 梦想天空（山边小溪）
@ webfby、
@bugong
感谢支持！
@bugong
感谢支持！
支持(0) 反对(0)
#40楼 2016-01-11 14:30 | 苏荷酒吧
博主给力啊
支持(0) 反对(0)
#41楼 2016-01-15 10:41 | 喊你不戴帽子
mark
支持(0) 反对(0)
#42楼 [ 楼主] 2016-01-16 21:44 | 梦想天空（山边小溪）
@ 喊你不戴帽子
@苏荷酒吧
谢谢支持！
@苏荷酒吧
谢谢支持！
支持(0) 反对(0)
#43楼 2016-08-12 10:16 | lmh2072005
不错哦
支持(0) 反对(0)
#44楼 2017-06-07 15:54 | GeQin
赞一个
支持(0) 反对(0)
#45楼 2017-06-16 11:57 | 哈喽雨涵
厉害呀
支持(0) 反对(0)
#46楼 2017-08-31 22:27 | TaoVincent
请问在第一个例子中
rect类为什么一定要作为spinner类的后代才能延时呢？
直接用rect类进行延时为什么不好用呢？
rect类为什么一定要作为spinner类的后代才能延时呢？
直接用rect类进行延时为什么不好用呢？
支持(0) 反对(0)
#47楼 2017-09-12 20:28 | 水墨江山画
赞赞赞
支持(0) 反对(0)
刷新评论刷新页面返回顶部
注册用户登录后才能发表评论，请 登录 或 注册， 访问网站首页。
【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库！
【推荐】如何快速搭建人工智能应用？
【大赛】2018首届“顶天立地”AI开发者大赛
【推荐】如何快速搭建人工智能应用？
【大赛】2018首届“顶天立地”AI开发者大赛
2011年度十大杰出IT博客
昵称： 梦想天空（山边小溪）
园龄： 9年11个月
粉丝： 12425
关注： 17
园龄： 9年11个月
粉丝： 12425
关注： 17
+加关注
|
|||||||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
|---|---|---|---|---|---|---|---|---|---|
| 24 | 25 | 26 | 27 | 28 | 29 | 30 | |||
| 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 | 1 | 2 | 3 | 4 | |||
搜索
我的标签
- 网页设计(403)
- jQuery(278)
- javascript(270)
- HTML5(224)
- CSS3(202)
- PSD(94)
- 字体(91)
- css(75)
- wordpress(51)
- 前端开发(50)
- 更多
随笔分类
- CSS3(337)
- HTML5(298)
- JavaScript(395)
- jQuery(286)
- Node.js(38)
- Others(18)
- WordPress(80)
- 创意欣赏(122)
- 开发技巧(20)
- 浏览器兼容(10)
- 名片设计(35)
- 前端文摘(37)
- 设计素材(138)
- 摄影欣赏(55)
- 实用工具 (198)
- 数据库技术(8)
- 网络资源(356)
- 网页设计(820)
- 网站优化(12)
- 我的博文(421)
- 移动开发(109)
- 原创翻译(960)
最新评论
- 1. Re:前端精选文摘：BFC 神奇背后的原理
- 学习一下,感谢博主
- 2. Re:太赞了！超炫的页面切换动画效果【附源码下载】
- 1GB
- 3. Re:分享35个非常漂亮的单页网站设计案例
- 非常好，非常喜欢，谢谢。
- 4. Re:前端精选文摘：BFC 神奇背后的原理
- 这里字打错了，应该是发生。
- 5. Re:前端精选文摘：BFC 神奇背后的原理
- 学习
阅读排行榜
- 1. 15款最好用的思维导图（心智图 ）工具(408198)
- 2. Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板(308049)
- 3. 使用 CSS3 实现超炫的 Loading（加载）动画效果(274977)
- 4. 《特别推荐》10套精美的免费网站后台管理系统模板(236194)
- 5. 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板(230255)
- 6. 35个让人惊讶的 CSS3 动画效果演示(229618)
- 7. CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）(225109)
- 8. 精心挑选12款优秀的 JavaScript 日历和时间选择插件(223556)
- 9. 60款很酷的 jQuery 幻灯片演示和下载(223183)
- 10. 7款很棒的 HTML5 视频播放器(212402)
- 11. 推荐35款精致的 CSS3 和 HTML5 网页模板(210785)
- 12. 推荐10款非常优秀的 HTML5 开发工具(194183)
- 13. 实时监听输入框值变化的完美方案：oninput & onpropertychange(185694)
- 14. 12个免费的 Twitter Bootstrap 后台模板(182809)
- 15. 精心挑选的12款优秀 jQuery Ajax 分页插件和教程(182304)
推荐排行榜
- 1. 【必备】史上最全的浏览器 CSS & JS Hack 手册(156)
- 2. 60款很酷的 jQuery 幻灯片演示和下载(148)
- 3. 《特别推荐》10套精美的免费网站后台管理系统模板(121)
- 4. 那些让人惊叹的的国外创意404错误页面设计(117)
- 5. 让人爱不释手的13套精美 Web 应用程序图标素材(111)
- 6. 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板(111)
- 7. Web 开发中很实用的10个效果【附源码下载】(111)
- 8. JavaScript初学者应注意的七个细节(108)
- 9. 推荐35款精致的 CSS3 和 HTML5 网页模板(106)
- 10. 【特别推荐】小伙伴们惊呆了！8个超炫的 Web 效果(103)
- 11. 精心挑选的12款优秀 jQuery Ajax 分页插件和教程(102)
- 12. 45个纯 CSS 实现的精美边框效果【附源码】【上篇】(102)
- 13. 网站项目必备——12款经典的白富美型 jQuery 图片轮播插件(100)
- 14. 期待已久的2012年度最佳 jQuery 插件揭晓(95)
- 15. 8款效果精美的 jQuery 加载动画和进度条插件(95)
Copyright ©2018 梦想天空（山边小溪）
转载于:https://www.cnblogs.com/leigepython/p/9290210.html
CSS3 loading效果全相关推荐
- css3 loading效果
梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...
- css3 loading 效果1
代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
- html5 加载svg,HTML5 SVG应用（1）——loading效果
先看一下效果: 链接 代码: y="0px" width="40px" height="40px" viewBox="0 0 40 ...
- css3个性loading,css3 中实现炫酷的loading效果
•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: 加载中 . . . css: ...
- 常见图像格式类型区别及使用说明绝对路径和相对路径的使用场景css3实现loading效果
经前两天晚上的提问,胡老师给我留下了两个问题: 1. JPEG PNG GIF等图像格式的区别和使用情况: 2. 绝对路径和相对路径的使用场景: 3. 如何用非GIF动画实现loading效果: 以下 ...
- CSS3实现8种Loading效果【第二波】
CSS3实现8种Loading效果[第二波] 原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接"上菜"-- 注: ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- css实现loading,CSS3实现18种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- 第1种效果: 代码如下: .loading{ width: 80px; height: 40px; ...
- HTML5+CSS3 最酷的 loading 效果汇总
用 gif 图片来做 loading 的时代已经过去了,它显得太 low 了,而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收 ...
最新文章
- ERP系统管理员的工具箱 推荐几款优秀的数据比较同步工具 Data Compare and Sync tool...
- [论文泛读] QoS论文两篇(Elsevier09, IEEE05)
- oracle-一些查看性能相关的视图
- 返朴归真,也谈面向对象编程的几个原则
- 面向对象技术-设计模式的图
- 【转】Android子线程真的不能更新UI么
- sql获取oracle数据库数据,通过sql语句获取数据库的基本信息
- Leecode 21. 合并两个有序链表——Leecode大厂热题100道系列
- 算法学习笔记（三）-----各种基础排序问题
- 来的多可选_您的框架有多可扩展性？
- n型半导体和p型半导体的区别_VNX系列大流量工业型膜堆， 为半导体等行业提供超纯水！...
- 如何绘制业务架构图 — 3.分解图
- [转载] python学习笔记numpy（一）np.zero
- Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘i
- [na]思科产品选型pdf
- 保姆式手把手教你接入易班开放平台接入个人外部网站
- 十大算法之迪杰斯特拉算法
- Detach Procedure
- 卡--配合--读卡器使用 磁卡 CPU卡 IC卡、ID卡、M1卡、射频卡区别 我在项目中使用到的S50卡（M1卡的一种）S50(Mifare 1K)卡简介及存储控制原理
- PHP开发网易云FM音乐试听程序源码+支持下载功能
热门文章
- executescalar mysql_ExecuteScalar
- mc服务器怎么做交易系统,《我的世界》村民交易系统详解
- 盛迈坤电商：店铺运营的数据分析
- Elastic中国开发者大会的精彩日程现已上线
- LWN：NVIDIA 与 nouveau！
- SOLIDWORKS 3D CAD 2019新增功能详解（一）：利用网格和扫描数据的新设计功能
- flstudio中文版下载免费flstudio怎么设置中文?英文切换中文语言详细操作教程
- 索尼爱立信哪款手机java最强,800W之争 索尼爱立信Aino对比诺基亚N86
- 【UE4】后处理制作马赛克效果
- 远程访问JMX遇到连接不上的问题（JConsole和VisualVM工具类似）