效果如图，原理就是一个火箭的图标做上下颤动的动画，喷气条是一个颜色渐变的长方块，四周的白条是几十条随机长度，动画时间随机的长条，下面上代码（用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 } }
