纯 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
<div class="frame">
<div class="ball one"></div>
<div class="ball two"></div>
<div class="ball three"></div>
</div>

<style>
.frame {
background-color: #EEEEEE;
position: relative;
width: 300px;
height: 200px;
}
.ball {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
animation:
animX 3s cubic-bezier(0.36, 0, 0.64, 1) infinite alternate,
animY 3s cubic-bezier(0.36, 0, 0.64, 1) infinite alternate,
scale 3s cubic-bezier(0.36, 0, 0.64, 1) infinite alternate;
}
.ball.one {
background-color: #FFFFCC;
animation-delay: -6s, -4.5s, -4.5s;
}
.ball.two {
background-color: #CCFFFF;
animation-delay: -4s, -2.5s, -2.5s;
}
.ball.three {
background-color: #FFCCCC;
animation-delay: -2s, -0.5s, -0.5s;
}
@keyframes animX {
0% { left: 0px; }
100% { left: 200px; }
}
@keyframes animY {
0% { top: 0px; }
100% { top: 100px; }
}
@keyframes scale {
0% { transform: scale(0.7); }
100% { transform: scale(1); }
}
</style>

解析

设置动画,分别控制小球 x 轴,y 轴,以及缩放比。先画张图,把小球 x 轴、y 轴的位置、缩放比与时间的关系用坐标系表示出来——

通过这张画图可以看出——

  1. 想顺时针,x 轴运动需要比 y 轴运动提前 1/4 个周期,逆时针则延后 1/4 个周期;
  2. 三个小球想均匀分布,需要两两错开 1/3 个周期;
  3. y 轴到达最高点时,球距离最远,y 轴到达最低点时,球距离最近,近大远小,y 轴位置和缩放比是正相关。

我们动画一个周期是 6 秒,理解了这些,就可以写出相应的 animation 出来了。

参考

https://www.jb51.net/css/643232.html

纯 CSS 实现椭圆轨迹旋转小球

https://www.imaegoo.com/2020/css-rotating-ball/

作者

iMaeGoo

发布于

2020-07-04

更新于

2020-07-04

许可协议

CC BY 4.0

评论