[分享]css3地球球转动

CSS3地球球转动是一种炫酷的效果，非常适合用在旅游或科学类的网站中，可以让用户感觉到视觉上的冲击力和科技感。下面是一个简单的示例代码： / 设置地球球的样式 / earth { width: 200...

CSS3地球球转动是一种炫酷的效果，非常适合用在旅游或科学类的网站中，可以让用户感觉到视觉上的冲击力和科技感。下面是一个简单的示例代码：

/* 设置地球球的样式 */
#earth {
  width: 200px;
  height: 200px; 
  background-image: url(earth.png);
  border-radius: 50%;
  box-shadow: inset 0px 0px 50px rgba(0,0,0,0.5),
              0px 0px 30px rgba(0,0,0,0.5);
  animation: rotate 10s linear infinite;
}

/* 地球球的旋转动画 */
@keyframes rotate {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
} 

首先，需要设置地球球的大小（width 和 height），以及背景图片（background-image）。同时，我们使用border-radius将地球球变成圆形，并添加了一个box-shadow，让其看起来更加真实。接着，我们使用CSS3动画的关键帧 @keyframes 来定义旋转的动画，通过将transform属性的rotateY值从0逐渐增加到360度，让地球球始终保持旋转状态。最后，我们将设置好的样式应用到ID为"earth"的div元素中，通过animation的infinite属性来设置无限循环。