[分享]css写一个3d地球

CSS写一个3D地球非常有趣而且很有创意。使用JavaScript和CSS做一个旋转的球可以让你的网页更加生动有趣。下面我们来看一下如何使用CSS实现这个3D地球效果。/ 定义 3D 地球的 CSS ...

CSS写一个3D地球非常有趣而且很有创意。使用JavaScript和CSS做一个旋转的球可以让你的网页更加生动有趣。下面我们来看一下如何使用CSS实现这个3D地球效果。

/* 定义 3D 地球的 CSS 样式 */

.earth {
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 500px;
  transform-style: preserve-3d;
}

.earth:before {
  content: "";
  background: url("earth.jpg") no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -100px;
  bottom: -100px;
  left: -100px;
  right: -100px;
  border-radius: 50%;
  transform: translateZ(-1px);
}

.earth:after {
  content: "";
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.5), transparent), 
              radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.5), transparent);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateZ(-1px);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

/* 让 3D 地球动起来 */

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

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

我们可以看到上面的代码中有很多有意思的属性和数值。例如，“perspective: 500px”可以让我们设置视角距离，而 “transform: rotateY(360deg)”可以让地球旋转。

当然，如果你想要在地球上显示实时数据或者其他有趣的信息，你可以使用JavaScript来动态修改地球的外观。希望这篇文章对你学习和研究 CSS 有所帮助！