hitch-sb-antd/src/views/statisticView/Main.vue

<template>
  <div class="main">
    <div class="header">
      <span class="header-title">MES 生产执行 制造</span>
      <div class="stage"><div class="circle"><span class="shadow"></span></div></div>
      <div class="planet">
        <div class="ball">
          <span class="title">设备系统</span>
          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
        </div>
        <div class="ball second">
          <span class="title">质量系统</span>
          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
        </div>
        <div class="ball third">
          <span class="title">生产系统</span>
          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
        </div>
        <div class="ball four">
          <span class="title">条码系统</span>
          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
        </div>
        <div class="ball five">
          <span class="title">排班系统</span>
          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
        </div>
        <div class="ball six">
          <span class="title">仓库系统</span>
          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.main{
  width: 1920px;
  height: 1080px;
  background: url(~@/assets/mine-bg.png);
  overflow: hidden;

  .header {
    width: 100%;
    padding-top:200px;
    display:flex;
    position: relative;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
   perspective: 1500px;
   .header-title {
              position: absolute;
              top:62%;
              left:41%;
              z-index:100000;
              font-size: 40px;
              color: #FFFFFF;
              background: linear-gradient(0deg, #079cf1 20%, #FFFFFF 50%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              font-weight: bold;
            }

  }
  .stage {
    width: 300px;
    height: 300px;
    display: inline-block;
    margin: 20px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
    .circle{
     background: url('~@/assets/earth.png') repeat-x;

     background-size: auto 100%;
     border-radius: 50%;
     height: 300px;
     width: 300px;
     position: relative;
     margin: 0;
  animation: move-map 30s infinite linear;
     &::before {
      content:'';
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: -40px 10px 70px 10px RGBA(40, 83, 205, 0.7) inset;
      z-index: 2;
     }
     &::after {
      content:'';
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      filter: blur(0);
     opacity: 0.5;
     background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
     background-size: auto 100%;
     z-index: 2222222;
     }

  }
  }
  .stage1 {
    width: 200px;
    height: 200px;
    display: inline-block;
    margin: 20px;
  perspective-origin: 50% 50%;
    .circle{
     background: url('~@/assets/earthpng.png') repeat-x;

     background-size: auto 100%;
     border-radius: 50%;
     height: 200px;
     width: 200px;
     position: relative;
     margin: 0;
  animation: move-map 30s infinite linear;
     &::before {
      content:'';
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: -40px 10px 70px 10px RGBA(40, 83, 205, 0.7) inset;
      z-index: 2;
     }
     &::after {
      content:'';
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      filter: blur(0);
     background: url('~@/assets/earth-bg.png') no-repeat;
     background-size: 200%;
     opacity: 0.8;
     background-position: -100px -130px;

     z-index: 222;
     }

  }
  }
}
        .planet {
            position: absolute;
            left:390px;
            top:30px;
            border: 5px solid #13c2c2;
            width: 1200px;
            height: 1200px;
            transform: scaleY(0.5) rotateZ(30deg);
            border-radius: 50%;
            transform-style: preserve-3d;

        }

        .ball {
            width: 200px;
            height: 200px;
            position: absolute;
            border-radius: 50%;
            left: calc(50% - 25px);
            top: -100px;
            text-align: center;
            line-height: 200px;
            color: #13c2c2;
            transform: rotateZ(-30deg) scaleY(2);
            .title {
              position: absolute;
              top:20px;
              left:20px;
              width: 100%;
              height: 100%;
              z-index:100000;
              font-size: 35px;
              color: #FFFFFF;
              background: linear-gradient(0deg, #079cf1 40%, #FFFFFF 50%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              font-weight: bold;
            }
        }
        .second {
            left: calc(50% + 450px);
            top: 400px;
        }
        .third {
            left: calc(50% + 230px);
            top: 910px;
        }
        .four {
            left: calc(50% - 300px);
            top: 1030px;
        }
        .five {
            left: calc(50% - 745px);
            top: 480px;
        }
        .six {
            left: calc(50% - 530px);
            top: 10px;
        }
        .planet {
            animation: planet-rotate 16s linear infinite;
        }

        .ball {
            animation: self-rotate 16s linear infinite;
        }
        /* // 公转动画 */
        @keyframes planet-rotate {
        0% {
            transform:  rotateX(60deg)scaleY(0.5) rotate(0);
        }
        100% {
            transform:  rotateX(60deg) scaleY(0.5) rotate(360deg);
        }
        }

        /* // 自转动画 */
        @keyframes self-rotate {
        0% {
            transform: rotate(0) scaleY(2) rotateX(-60deg);
        }
        100% {
            transform: rotate(-360deg) scaleY(2) rotateX(-60deg);
        }
        }

@keyframes move-map {
  0% {
    background-position: -880px 0; }

  100% {
    background-position: 0 0; } }
</style>