用CSS3实现星系轨道旋转特效，让网页动起来！

7 min read

要实现星系轨道旋转的特效，可以使用CSS3的animation和transform属性。以下是一个简单的示例：

HTML代码：

<div class="galaxy">
  <div class="planet"></div>
</div>

CSS代码：

.galaxy {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 50px auto;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
}

.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  animation: orbit 5s linear infinite;
}

@keyframes orbit {
  from {
    transform: rotate(0) translateX(100px) rotate(0);
  }
  to {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}

解析：

  • .galaxy设置了一个圆形容器，用border-radius将它变成一个圆形。overflow: hidden用来隐藏溢出的行星。
  • .planet用position:absolute把行星放到了中心位置。transform: translate(-50%, -50%)用来把行星水平居中和垂直居中。
  • animation设置了动画。orbit是动画的名称。5s是动画时间。linear是动画速度，表示匀速运动。infinite表示一直运行动画。
  • @keyframes里定义了动画的状态。from表示动画起始状态。transform: rotate(0) translateX(100px) rotate(0)设置了行星的位置。translateX(100px)让行星离轨道中心100像素，rotate(0)让行星初始时朝上。to表示动画结束状态。transform: rotate(360deg) translateX(100px) rotate(-360deg)表示行星沿着一个圆形轨道旋转。