css3行星环绕的特效

CSS3是实现各种各样特效的好帮手。在这里我们将介绍一种酷炫的特效——行星环绕效果。

实现这个特效需要用到CSS3中的transform和animation属性。其中，transform用来实现物体的转换变形，如平移、旋转和缩放等；animation则是实现物体的动画效果。

/* CSS代码段 */
/* 行星环绕容器 */
.planet-wrap {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 50px auto;
}

/* 行星 */
.planet {
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
}

/* 地球 */
.earth {
  background-color: blue;
  top: 100px;
  left: 125px;
  animation: rotate-earth 10s linear infinite;
}

/* 月球 */
.moon {
  background-color: gray;
  top: 55px;
  left: 185px;
  animation: rotate-moon 3s linear infinite;
}

/* 行星运动动画 */
@keyframes rotate-earth {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

在HTML中，我们可以简单地创建一个总容器，并放入两个小球（地球和月球）。在CSS中，我们为容器设置宽度和高度，并让其相对定位，以保证内部元素的绝对定位可以在容器中生效。接着，我们分别为两个球设置宽高、圆角和初始位置。

在行星运动动画中，我们分别为地球和月球设置了不同的转换变形效果，并让它们一直旋转。通过使用animation属性，我们可以同时将两个动画无限次循环。

最终，我们就可以在页面上看到两个小球围绕着中心点旋转的酷炫效果啦！