css制作旋转地球

地球有一个比较亮的描边，还有一些网格状的东西罩在上面。
地球与网状格格顺时针旋转，光边逆时针旋转，这种效果使用的是动画效果与过渡效果实现，样式代码如下：map1、map2、map3盒子的背景分别是地球、描边、网格。

css如下：

.map1,
.map2,
.map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  width: 6.475rem;
  height: 6.475rem;
  opacity: 0.3;
}
.map1 {
  background-image: url(../assets/image/dq.png);
  animation: rotate 15s linear infinite;
  width: 700px;
  height: 700px;
}
.map2 {
  width:700px;
  height: 700px;
  background-image: url(../assets/image/border.png);
  opacity: 0.8;
  animation: rotate 5s linear infinite;
  z-index: 2;
}
.map3 {
  width: 700px;
  height: 700px;
  background-image: url(../assets/image/wg.png);
  animation: rotate1 10s linear infinite;
}
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

看下效果吧 

屏幕录制 2023-09-06 093341