[分享]css3地球公转哔哩哔哩

CSS3地球公转是一种炫酷的效果，它可以模拟地球在太空中公转的样子，非常逼真。通过使用CSS3技术，我们可以轻松地实现这样一个效果，让网页看起来更加生动有趣。/首先，我们需要定义一个地球的div容器/...

CSS3地球公转是一种炫酷的效果，它可以模拟地球在太空中公转的样子，非常逼真。通过使用CSS3技术，我们可以轻松地实现这样一个效果，让网页看起来更加生动有趣。

/*首先，我们需要定义一个地球的div容器*/
<div class="earth"></div>

/*接下来，我们需要使用CSS3的transform属性来实现地球的旋转*/
.earth {
  width: 200px;
  height: 200px;
  background-image: url("earth.png");
  background-size: 100% 100%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  animation: rotate 20s linear infinite;
  transform-style: preserve-3d;
}

/*我们还需要定义一个动画，使地球在容器中旋转*/
@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/*最后，我们可以通过在容器的伪元素中加入一些元素来模拟星星和太阳等效果，让效果更加逼真*/
.earth::before{
  content:"";
  display:block;
  width:60px;
  height:60px;
  border-radius:50%;
  background-color:yellow;
  position:absolute;
  top:-120px;
  left:calc(50% - 30px);
  transform-style:preserve-3d;
  animation:rotate-sun 8s linear infinite;
  z-index:2;
}

.earth::after{
  content:"";
  display:block;
  width:2px;
  height:2px;
  border-radius:50%;
  background-color:white;
  position:absolute;
  top:-100px;
  right:calc(50% - 1px);
  transform-style:preserve-3d;
  animation:rotate-star1 5s linear infinite;
  z-index:2;
}

/*其他星星元素以此类推......*/ 

通过使用以上CSS代码，我们就可以实现一个带有星星和太阳的地球公转动画了。希望这个效果可以让你的网页更加炫酷。