css特效
1.页面淡入淡出
<html style="background:#0086b5">
<!--简易loading-->
<div id="loading" style="z-index:-999;font-size:24px;width:100%;height:24px;text-align:center;position:absolute;top:50%;margin-top:-12px"><b>加载中...</b></div>
<head>
<style>/*页面淡入淡出效果*/
@-webkit-keyframes fadeIn {
0% {opacity: 0; /*初始状态 透明度为0*/}
50% {opacity: 0.5; /*中间状态 透明度为0*/}
100% {opacity: 1; /*结尾状态 透明度为1*/}
}
body{ font-family:"微软雅黑"; background:#f0f0f0; height:100%;
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 5s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/
}
</style>
</head>
</html>
2.左右反转loading
<html>
<head>
<style>
#loading
{
z-index:-999;
background-color: #0098fc;
font-size:24px;
width:60px;
height:60px;
text-align:center;
position:absolute;
top:50%;
left:50%;
margin-top:-30px;
margin-left:-30px;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0%{ -webkit-transform: perspective(120px) }
50%{ -webkit-transform: perspective(120px) rotateY(180deg) }
100%{ -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
</head>
<body style="width:100%;height:100%;">
<div id="loading"></div>
</body>
</html>
背景图自适应拉伸
<div style="width:100%;height:80px;background-image:url('bg.png');background-repeat:no-repeat;background-size:100% 100%;"></div>
flex左固定右自适应
<div style="display:flex">
<div style="width:200px;background-color:green">1</div>
<div style="flex:100;background-color:red">2</div>
</div>
flex布局实现div水平垂直居中
<div style="background:green;width:100%;height:200px; display:flex;flex-wrap: wrap ;align-items:center/*垂直居中*/; justify-content:center;/*内容水平居中*/">
<div style="width:50%;height:80px;background-color:red;background-image:url('title.png');background-repeat:no-repeat;background-size:100% 100%;"></div>
</div>
flex布局自动换行取消空白行间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: wrap;
align-content:flex-start; //取消空白行间距
}
#main div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-wrap 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-wrap 属性支持该属性。</p>
</body>
</html>
未加align-content:flex-start;之前效果(空白行间距)
加了之后效果
详解:https://blog.csdn.net/txfyteen/article/details/82663029
align-items,align-content详解:https://blog.csdn.net/cc18868876837/article/details/88138057
转自其他文章:css3 loading
http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
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 代码:
1
2
3
4
|
<div class= "spinner" > <div class= "cube1" ></div> <div class= "cube2" ></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
|
.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
|
<div class= "spinner" > <div class= "dot1" ></div> <div class= "dot2" ></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
|
.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
|
<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 ); } } |
vw布局实现垂直居中
<div style="background:red;width:50vw;height:50vh;margin: 25vh auto; ">aa<div/> |
From:http://www.cnblogs.com/xuejianxiyang/p/5522534.html
作者:xuejianxiyang
出处:http://xuejianxiyang.cnblogs.com
关于作者:Heaven helps those who help themselves.
本文版权归原作者和博客园共有,欢迎转载,但未经原作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。