下红包雨效果 android,vue移动端实现红包雨效果

.ser_home {

width: 100%;

height: 100%;

}

.red_packet {

display: block;

position: relative;

overflow: hidden;

width: 100%;

height: 100%;

i {

width: 48px;

height: 69px;

display: block;

background: url('/hongbao.png') no-repeat;

}

li {

position: absolute;

animation: all 3s linear;

top:-100px;

z-index: 10;

&.move_1 {

-webkit-animation: aim_move 5s linear 1 forwards;

animation: aim_move 5s linear 1 forwards;

}

}

a {

display: block;

}

}

@keyframes aim_move {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

100% {

-webkit-transform: translateY(120vh);

transform: translateY(120vh);

}

}