1.页面淡入淡出
2.左右反转loading
转自其他文章:css3 loading
Loading 动画效果一
HTML 代码：
1
2
3
4
5
6
7
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
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
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 代码：
1
2
3
4
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 代码：
1
2
3
4
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
.spinner {
margin : 100px auto ;
width : 90px ;
height : 90px ;
position : relative ;
text-align : center ;
-webkit-animation: rotate 2.0 s infinite linear;
animation: rotate 2.0 s infinite linear;
}
.dot 1 , .dot 2 {
width : 60% ;
height : 60% ;
display : inline- block ;
position : absolute ;
top : 0 ;
background-color : #67CF22 ;
border-radius: 100% ;
-webkit-animation: bounce 2.0 s infinite ease-in-out;
animation: bounce 2.0 s infinite ease-in-out;
}
.dot 2 {
top : auto ;
bottom : 0px ;
-webkit-animation-delay: -1.0 s;
animation-delay: -1.0 s;
}
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate( 360 deg) }}
@keyframes rotate { 100% { transform: rotate( 360 deg); -webkit-transform: rotate( 360 deg) }}
@-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 代码：
1
2
3
4
5
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
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
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 );
}
}
From:http://www.cnblogs.com/xuejianxiyang/p/5522534.html
从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AMHTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。
了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AMWebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AMHTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。
HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AMhtmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract
HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AMHTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。
HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PMHTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AMHTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AMAnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
禅工作室 13.0.1
功能强大的PHP集成开发环境
