css3地球旋转效果

CSS3提供了许多用于美化网页的新特性，其中包括地球旋转效果。这个效果可以让我们的网页更加生动有趣，为用户提供更好的体验。

/* HTML代码 */


/* CSS代码 */
.earth {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-image: url("earth.jpg");
  background-size: cover;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

代码中，我们创建了一个div元素，并设置其类名为"earth"。接着，给这个div设置了宽高、圆角，以及用于显示地球的图片。最后，我们使用CSS3动画特性，创建了一个名为"rotate"的动画，该动画让地球在10秒内顺时针旋转一周，并无限循环。

需要注意的是，动画需要使用@keyframes标签来声明。在这里，我们将地球的旋转效果分为了两个阶段，即从0度至360度。通过设置逐帧动画的transform属性，就能实现地球的旋转。

使用CSS3地球旋转效果，可以让我们的网页更加有趣和生动。可以尝试加入一些其他的效果，比如使用伪类元素添加月球或星星，或者将地球移动到页面的特定位置等。