# 1. 动画的基本使用
制作动画分为两步:
先用keyframes定义动画(类似定义类选择器) 动画序列
0%是动画的开始,100%是动画的完成,这样的规则就是动画序列 在**@keyframes**中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐便化为另一种样式的效果,你可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 " form " 和 ‘’ to " ,等同于0%和100%
百分比就是动画时间的划分
@keyframes 动画名称 {
0%{
width: 100px;
}
100%{
width: 200px;
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 再使用(调用)动画
div{
width: 200px;
height: 200px;
background-color: green;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2. 动画常用属性
# 3. 速度曲线
//打字机效果
<style>
div{
width: 0;
height: 20px;
background-color: lightgreen;
font-size: 12px;
/* 让文字强制一行显示 */
white-space: nowrap;
/* steps就是分几步来完成动画 */
/* forwards 动画停留在结束状态*/
animation: aa 6s steps(6) forwards;
}
@keyframes aa {
0%{
width: 0;
}
100%{
width: 72px;
}
}
</style>
<body>
<div>
前端欢迎您!
</div>
</body>
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
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
# 4. 案例-奔跑的熊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奔跑的熊</title>
<style>
/* 背景图 */
body{
background: url('media/bg1.png') no-repeat;
animation: bgback 6s linear infinite;
}
/* 放小熊的图片 */
div{
position: absolute;
width: 200px;
height: 100px;
background: url('media/bear.png') no-repeat;
/* 添加多个动画 用逗号分隔 */
animation: bear 0.4s steps(8) infinite, move 3s linear forwards;
}
@keyframes bear {
0%{ background-position: 0 0; }
100%{
background-position: -1600px 0;
}
}
@keyframes move {
0%{ left: 0; top: 200px;}
100%{
left: 50%;
top: 200px;
/* 小熊在屏幕中间 */
transform: translateX(-50%);
/* margin-left: -100px; 这样也可以 但需要知道div的宽度 */
}
}
@keyframes bgback {
0%{ background-position: 0 0;}
100%{
background-position: -1600px 0;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
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
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
# 5. 案例-两面翻转盒子
搭建HTML结构
box父盒子里面包含两个子盒子
box是翻转的盒子,front是前面盒子,back是后面盒子
CSS样式
box指定大小,切记要添加3d呈现
fronot盒子设置
backface-visibility: hidden;
不面向屏幕时隐藏。back盒子要沿着Y轴翻转180度
最后鼠标经过box沿着Y旋转180deg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 300px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .4s;
/* 让背面的紫色盒子保留立体空间 给父级添加的 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
z-index: 1;
/* 不面向屏幕时隐藏 */
backface-visibility: hidden;
}
.back {
background-color: purple;
/* 像手机一样 背靠背 旋转 */
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">Baucd</div>
<div class="back">前端学习记录</div>
</div>
</body>
</html>
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
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
# 6. 案例-3D导航栏
搭建HTML结构:
li做导航栏
.box是翻转的盒子,front是前面的盒子,bottom是底下的盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
margin: 0 5px;
width: 120px;
height: 35px;
list-style: none;
/* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
perspective: 500px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.front {
background-color: pink;
z-index: 1;
/* 往前移动17.5px */
transform: translateZ(17.5px);
}
.bottom {
background-color: purple;
/* 这个x轴一定是负值 */
/* 我们如果有移动 或者其他样式,必须先写我们的移动 */
transform: translateY(17.5px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">Baucd</div>
<div class="bottom">前端学习笔记</div>
</div>
</li>
<li>
<div class="box">
<div class="front">Baucd</div>
<div class="bottom">前端学习笔记</div>
</div>
</li>
<li>
<div class="box">
<div class="front">Baucd</div>
<div class="bottom">前端学习笔记</div>
</div>
</li>
<li>
<div class="box">
<div class="front">Baucd</div>
<div class="bottom">前端学习笔记</div>
</div>
</li>
<li>
<div class="box">
<div class="front">Baucd</div>
<div class="bottom">前端学习笔记</div>
</div>
</li>
<li>
<div class="box">
< <div class="front">Baucd</div>
<div class="bottom">前端学习笔记</div>
</div>
</li>
</ul>
</body>
</html>
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
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