前端火箭飞行效果

 

效果如图，原理就是一个火箭的图标做上下颤动的动画，喷气条是一个颜色渐变的长方块，四周的白条是几十条随机长度，动画时间随机的长条，下面上代码（用vue模板写的）

html部分

<template>
  <div class="hello">
      <div class="rocket">
        <img src="./rocket.png" alt="" class="">
      </div>
  </div>
</template>

css部分

.hello{
  height: 100vh;
  background: darkslateblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hello .rocket{
  position: relative;
  animation: move 5.5s linear forwards;
}
/*@keyframes move {*/
  /*0%{*/
    /*transform: translateY(40vh);*/
  /*}*/
  /*100%{*/
    /*transform: translateY(-43vh);*/
  /*}*/
/*}*/
@keyframes move {
  0%, 100%{
    transform: translateY(-2px);
  }
  50%{
    transform: translateY(2px);
  }
}

.hello .rocket::after{
  content: '';
  width: 7px;
  height: 70px;
  background: linear-gradient(deepskyblue,transparent);
  position: absolute;
  top: 96%;
  left: 50%;
  transform: translateX(-50%);
}

.hello i{
  width: 1px;
  height: 20px;
  position: absolute;
  left: 20px;
  top: 20px;
  background: #fff;
  animation: shake 2s linear infinite;
}

@keyframes shake {
  0%{
    transform: translateY(0px);
  }
  100%{
    transform: translateY(85vh);
  }
}

js部分

mounted(){
    this.$nextTick(()=>{
      let num = 40
      for (let i=0;i<num;i++){
        const dom = document.createElement('i')
        let height = this.rand(30,100)
        dom.style.height = height + 'px'
        dom.style.left = this.rand(1,99) + 'vw'
        dom.style.animationDuration = this.rand(5,30) / 10 + 's'
        $('.hello').append(dom)
      }
      console.log(this.rand(1,100))
    })
  },
  methods:{
    rand(m,n){
      return Math.ceil(Math.random() * (n-m+1)) + m-1
    }
  }