纯css手写数据大屏常用旋转地球

HTML

<div id="app">
  <div class="bgBox">
    <div class="bg1">
    </div>
    <div class="bg2">
      <div class="map">
      </div>
    </div>
    <div class="bg3">
    </div>
  </div>
</div>

CSS

#app {
     font-family: PingFangSC-Semibold, PingFang SC;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     width: 100vw;
     height: 100vh;
     box-sizing: border-box;
     color: #fff;
     background: linear-gradient( 174deg, rgba(4, 4, 56, 1) 0%, rgba(16, 16, 98, 1) 46%, rgba(2, 2, 27, 1) 100% );
     position: relative;
     .bgBox {
         position: fixed;
         width: 100%;
         height: calc(100% + 1.85rem);
         z-index: 0;
         top: -1.85rem;
         .bg1 {
             width: 100%;
             height: 100%;
             background: url("../assets/img/bg/2.png") no-repeat center;
             background-size: contain;
             position: absolute;
             top: 0;
             -webkit-animation: breathe 30s infinite linear alternate forwards;
             animation: breathe 30s infinite linear alternate forwards;
        }
         .bg2 {
             width: 100%;
             height: 100%;
             background: url("../assets/img/bg/4.png") no-repeat center;
             background-size: contain;
             position: relative;
             top: 0;
             transform: scale(1.15);
             .map {
                 width: 46.5%;
                 height: 45vw;
                 border-radius: 50%;
                 position: absolute;
                 transform-style: preserve-3d;
                 -webkit-transform-style: preserve-3d;
                 background: url("../assets/img/bg/7.png") repeat-x;
                 background-size: auto 100%;
                 -webkit-animation: move-map 240s infinite linear;
                 animation: move-map 240s infinite linear;
                 left: -1.478rem;
                 right: 0;
                 margin: auto;
                 top: 7.1rem;
            }
             @media only screen and (max-width: 1921px) {
                 .map {
                     width: 38%;
                     height: 36vw;
                     top: 6.5rem;
                     left: -1.078rem;
                }
            }
        }
         .bg3 {
             width: 100%;
             height: 100%;
             background: url("../assets/img/bg/3.png") no-repeat center;
             background-size: contain;
             position: absolute;
             top: 0;
             z-index: 1;
             transform: scale(1.15);
        }
         @-webkit-keyframes move-map {
             0% {
                 background-position: -6280px 0;
            }
             100% {
                 background-position: 0 0;
            }
        }
         @keyframes move-map {
             0% {
                 background-position: -6280px 0;
            }
             100% {
                 background-position: 0 0;
            }
        }
         @-webkit-keyframes breathe {
             0% {
                 opacity: 0.4;
                 transform: scale(1);
            }
             50% {
                 opacity: 1;
                 transform: scale(1.15);
            }
             100% {
                 opacity: 0.4;
                 transform: scale(1);
            }
        }
         @keyframes breathe {
             0% {
                 opacity: 0.4;
                 transform: scale(1);
            }
             50% {
                 opacity: 1;
                 transform: scale(1.15);
            }
             100% {
                 opacity: 0.4;
                 transform: scale(1);
            }
        }
    }
}