云和飞机在飞

  <div class="sky">
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
    <div class="donghua2">
      <img :src="require('@/assets/img/shouye/wurenji2.gif')" style="width: 100px;" />
    </div>
</div>
/*云背景*/

.sky {

  background: linear-gradient(to bottom,transparent,#ffffff 100%),linear-gradient(to right,var(--uavshallow-color) 10%,var(--uavdeep-color));
  position: relative;
  overflow: hidden;
  animation: sky_background 50s ease-out infinite;
}

.sky .clouds_one {
  background: url("../../../assets/img/shouye/cloud_one.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  animation: cloud_one 50s linear infinite;
}

.sky .clouds_two {
  background: url("../../../assets/img/shouye/cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  animation: cloud_two 75s linear infinite;

}

.sky .clouds_three {
  background: url("../../../assets/img/shouye/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;

  animation: cloud_three 100s linear infinite;

}


@-webkit-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
/*无人机飞*/
.donghua2 {
  position: absolute;
  left: -500px;
  animation: fly2 3s infinite linear;
  animation-iteration-count: 1;
  animation-delay: 3s;
}

@keyframes fly2 {
  0% {
    top: 20%;
    left: 100%;
  }

  100% {
    top: 40%;
    left: -20%;
  }
}