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