CSS3制作地球旋轉動畫

地球旋轉動畫是一個很有趣的CSS3應用，它可以讓地球在網(wǎng)頁上旋轉，增加一些交互性和趣味性，下面是一些實現(xiàn)地球旋轉動畫的CSS3代碼示例：

1、創(chuàng)建一個地球模型

我們需要創(chuàng)建一個地球模型，這通常是一個圓形或橢圓形的div元素，我們可以使用border-radius屬性來使其呈現(xiàn)圓形。

.earth {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #000;
  position: relative;
}

2、添加地球表面紋理

為了讓地球看起來更真實，我們可以添加一些紋理，這可以通過使用CSS的background-image屬性來實現(xiàn)。

.earth {
  background-image: url('earth_surface_texture.png');
  background-size: cover;
}

3、創(chuàng)建旋轉動畫

我們可以使用CSS的animation屬性來創(chuàng)建旋轉動畫。

.earth {
  animation: rotate 2s linear infinite;
}

上述代碼將使地球以2秒的速度旋轉，我們可以根據(jù)需要調整旋轉速度和其他參數(shù)。

4、添加交互性（可選）

為了讓地球旋轉動畫更加有趣，我們可以添加一些交互性，例如讓用戶點擊地球時改變旋轉方向或速度，這可以通過JavaScript來實現(xiàn)。

var earth = document.querySelector('.earth');
earth.addEventListener('click', function() {
  if (earth.style.animation === 'rotate 2s linear infinite') {
    earth.style.animation = 'rotate -2s linear infinite'; // 反轉旋轉方向
  } else {
    earth.style.animation = 'rotate 2s linear infinite'; // 恢復旋轉方向
  }
});

上述代碼將使地球在每次點擊時改變旋轉方向，我們可以根據(jù)需要添加更多的交互性。