用CSS实现弹跳动画

这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我们继续看下去。

利用伪元素

由于只使用了一个div,要同时达到正方形旋转与阴影缩放的效果,这里必须使用两个伪元素(before与after)来完成,严格来说,虽然只有一个div,但是却是把这个div当作外框,让伪元素before作为旋转的正方形,让伪元素after作为阴影。

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
.box{
position:relative;

}
.box:before{
content:'';
position:absolute;
z-index:2;
top:60px;
left:50px;
width:50px;
height:50px;
background:#c00;
border-radius:2px;
transform: rotate(45deg);
}
.box:after{
content:'';
position:absolute;
z-index:1;
top:128px;
left:52px;
width:44px;
height:3px;
background:#eaeaea;
border-radius:100%;
}

大概画出

CSS动画

画出正方形与阴影之后,再来就是要做动画了,为了避免太过复杂,这里我们先不要旋转,先单纯让正方形上下跳动,然后阴影会放大缩小,下面的示例的动画,又新增了20%与80%的keyframe,目的是为了让接触的时候角落才会变圆,不然就会变成刚开始移动时尖角就变圆,就会很怪异了。

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
.box:before{
content:'';
position:absolute;
z-index:2;
top:60px;
left:50px;
width:50px;
height:50px;
background:#c00;
border-radius:2px;
transform: rotate(45deg);
-webkit-animation:box .8s infinite ;
}
@-webkit-keyframes box{
0%{
top:50px;
}
20%{
border-radius:2px; /*从20%的地方才开始变形*/
}
50%{
top:80px;
border-bottom-right-radius:25px;
}
80%{
border-radius:2px; /*到80%的地方恢复原状*/
}
100%{
top:50px;
}
}
.box:after{
content:'';
position:absolute;
z-index:1;
top:128px;
left:52px;
width:44px;
height:3px;
background:#eaeaea;
border-radius:100%;
-webkit-animation:shadow .8s infinite ;
}
@-webkit-keyframes shadow{
0%,100%{
left:54px;
width:40px;
background:#eaeaea;
}
50%{
top:126px;
left:50px; /*让阴影保持在原位*/
width:50px;
height:7px;
background:#eee;
}
}

css动画

加入旋转效果

了解原理之后,我们只要再加上旋转的属性,就可以达到弹跳起来的时候有旋转的效果,不过这里又有用到一个小技巧,就是落下的时候是90度转到45度,弹上去的时候从45旋转到0度,然后在这一瞬间从0度变成90度(100%到0%),如此一来我们就会产生错觉,感觉好像一直在旋转了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@-webkit-keyframes box{
0%{
top:50px;
transform: rotate(-90deg); /**/
}
20%{
border-radius:2px;
}
50%{
top:80px;
transform: rotate(45deg);
border-bottom-right-radius:25px;
}
80%{
border-radius:2px;
}
100%{
top:50px;
transform: rotate(0deg);
}
}

加入旋转效果

完整项目代码:

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
<!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>css3弹跳动画</title>
<style>
.box {
position: relative;
}
/* 简单画出大概 */
/* .box:before {
content: '';
position: absolute;
z-index: 2;
top: 60px;
left: 50px;
width: 50px;
height: 50px;
background: #c00;
border-radius: 2px;
transform: rotate(45deg);
}

.box:after {
content: '';
position: absolute;
z-index: 1;
top: 128px;
left: 52px;
width: 44px;
height: 3px;
background: #eaeaea;
border-radius: 100%;
} */
/* 跳动 */

.box:before {
content: '';
position: absolute;
z-index: 2;
top: 60px;
left: 50px;
width: 50px;
height: 50px;
background: #c00;
border-radius: 2px;
transform: rotate(45deg);
-webkit-animation: box .8s infinite;
}

@-webkit-keyframes box {
0% {
top: 50px;
}
20% {
border-radius: 2px;
/*从20%的地方才开始变形*/
}
50% {
top: 80px;
border-bottom-right-radius: 25px;
}
80% {
border-radius: 2px;
/*到80%的地方恢复原状*/
}
100% {
top: 50px;
}
}

.box:after {
content: '';
position: absolute;
z-index: 1;
top: 128px;
left: 52px;
width: 44px;
height: 3px;
background: #eaeaea;
border-radius: 100%;
-webkit-animation: shadow .8s infinite;
}

@-webkit-keyframes shadow {
0%,
100% {
left: 54px;
width: 40px;
background: #eaeaea;
}
50% {
top: 126px;
left: 50px;
/*让阴影保持在原位*/
width: 50px;
height: 7px;
background: #eee;
}
}
/* 加入旋转 */

@-webkit-keyframes box {
0% {
top: 50px;
transform: rotate(-90deg);
/**/
}
20% {
border-radius: 2px;
}
50% {
top: 80px;
transform: rotate(45deg);
border-bottom-right-radius: 25px;
}
80% {
border-radius: 2px;
}
100% {
top: 50px;
transform: rotate(0deg);
}
}
</style>
</head>

<body>
<div class="box"></div>
</body>

</html>

-------------本文结束感谢您的阅读-------------
木槿前端不求人,有空就来坐坐。
0%