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

话不多说看效果

相关代码

<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