如何使用CSS实现动态的地球旋转动画？

在CSS中实现动态的地球旋转动画通常依赖于CSS3的`@keyframes`规则和`transform`属性，特别是`transform: rotate()`。但是，由于纯CSS无法处理3D旋转，我们可以利用`transform-origin`和`animation`属性配合，创建一种近似的二维旋转效果。下面是一个简单例子，地球会每秒旋转一圈：

.earth-rotating {
  width: 200px;
  height: 200px;
  position: relative;
  animation: spin 2s infinite linear;
}

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

.earth-rotating::before,
.earth-rotating::after {
  /* 地球表面部分的样式 */
}

.earth-rotating::before {
  // ...
}

.earth-rotating::after {
  // ...
}

在这个例子中，`.earth-rotating`元素设置了名为`spin`的动画，它会从0度开始旋转到360度，每2秒完成一次循环。如果你希望地球在某个点旋转，可以调整`transform-origin`。

注意这并不是真正的3D旋转，对于复杂和真实的地球旋转动画，你可能需要借助JavaScript或SVG等其他技术。