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>
Copy the code

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.85 rem); z-index: 0; Top: 1.85 rem; .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; The 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.478 rem. right: 0; margin: auto; Top: 7.1 rem; } @media only screen and (max-width: 1921px) { .map { width: 38%; height: 36vw; Top: 6.5 rem; Left: 1.078 rem. } } } .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; The 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-timing-opacity {opacity: 0; transform: scale(1); } 50% { opacity: 1; The transform: scale (1.15); Opacity: 0.4; transform: scale(1); }} @frames {0; transform: scale(1); } 50% { opacity: 1; The transform: scale (1.15); Opacity: 0.4; transform: scale(1); }}}}Copy the code