//css
@keyframes tY1000 {
0% {transform: translateY(-50px) rotate(180deg)}
100% {transform: translateY(800px) rotate(180deg)}
}
.object {
position: fixed;
top: 0;
left: 0;
z-index: 999;
span {
color: #fff;
position: absolute;
top: 0;
left: 0;
animation: tY1000 15s infinite linear;
&:nth-child(1) {
left: 345px;
animation: tY1000 18s infinite linear;
}
&:nth-child(2) {
left: 105px;
animation: tY1000 25s infinite linear;
}
&:nth-child(3) {
left: 45px;
animation: tY1000 16s infinite linear;
}
&:nth-child(4) {
left: 65px;
animation: tY1000 24s infinite linear;
}
&:nth-child(5) {
left: 35px;
animation: tY1000 22s infinite linear;
}
&:nth-child(6) {
left: 25px;
animation: tY1000 28s infinite linear;
}
&:nth-child(7) {
left: 255px;
animation: tY1000 16s infinite linear;
}
&:nth-child(8) {
left: 325px;
animation: tY1000 17s infinite linear;
}
&:nth-child(9) {
left: 115px;
animation: tY1000 20s infinite linear;
}
&:nth-child(10) {
left: 225px;
animation: tY1000 15s infinite linear;
}
&:nth-child(11) {
left: 325px;
animation: tY1000 28s infinite linear;
}
&:nth-child(12) {
left: 285px;
animation: tY1000 16s infinite linear;
}
&:nth-child(13) {
left: 275px;
animation: tY1000 29s infinite linear;
}
&:nth-child(14) {
left: 375px;
animation: tY1000 29s infinite linear;
}
}
}
<!-- 下坠物 -->
<div class="object" v-if="type == 2">
<span class="iconfont icon-yezi"></span>
<span class="iconfont icon-yezi1"></span>
<span class="iconfont icon-yezi"></span>
<span class="iconfont icon-yezi1"></span>
<span class="iconfont icon-yezi1"></span>
<span class="iconfont icon-yezi"></span>
<span class="iconfont icon-yezi1"></span>
<span class="iconfont icon-yezi"></span>
<span class="iconfont icon-yezi1"></span>
<span class="iconfont icon-yezi"></span>
<span class="iconfont icon-yezi"></span>
<span class="iconfont icon-yezi1"></span>
<span class="iconfont icon-yezi"></span>
<span class="iconfont icon-yezi"></span>
</div>