likes
comments
collection
share

CSS 椭圆形轨迹小球转动

作者站长头像
站长
· 阅读数 38

逛设计网站的时候，发现这个动画效果。想着自己可以实现一下，但是发现自己实现起来还是不太像。大概就 50% 吧。😂😂😂😂 中间的停顿部分，确实没有处理好。因为没有这个 UI 切图，所以效果上，也不太像。

各位看的时候多担待一点，如果可以更好的复现，麻烦在评论区，告诉我一下。

CSS 椭圆形轨迹小球转动

这个椭圆形轨迹的小球

网站地址：www.zcool.com.cn/work/ZNjEyO…

页面 dom 结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./test.css">
</head>

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

</html>

box 的椭圆形，通过 keyframes + transform + rotate + scaleY 实现

.box {
  position: relative;
  padding: 50px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 1px solid #a0b8f3;
  animation: spin 3s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(-30deg) scaleY(0.5) rotate(0deg);
  }

  100% {
    transform: rotate(-30deg) scaleY(0.5) rotate(360deg);
  }
}

CSS 椭圆形轨迹小球转动

小球的位置，使用绝对定位来实现。设置 position 为 absolute。通过 keyframes + transform + rotate + scaleY + scale 实现

.ball {
  display: inline-block;
  background: #a0b8f3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: ball-spin 3s infinite linear;
  color: #fff;
  position: absolute;
  text-align: center;
  left: 45px;
  top: 45px;
}

@keyframes ball-spin {
  0% {
    transform: rotate(0deg) scaleY(2) rotate(30deg) scale(1);
  }

  100% {
    transform: rotate(-360deg) scaleY(2) rotate(30deg) scale(1);
  }
}

最后我们来看一下完整代码