vue.js实现红包雨

vue.js实现红包雨

看了好多实现红包雨的案例，但好像还没有vue实现红包雨的，所以我来实现下，测试过了，兼容性很好，接下来直接po代码啦
index.vue

js

css

 @keyframes redImg {
    0% {
        top:0;
    }
    100% {
        top: 100%;
    }
}
.redBox {
    position: absolute;
   /* opacity: 0;*/
   z-index: 10000;
    animation: redImg 3s infinite linear;
    -webkit-animation: redImg 3s infinite linear;
    -moz-animation: redImg 3s infinite linear;
    -ms-animation: redImg 3s infinite linear;
    -o-animation: redImg 3s infinite linear;
}

.redBox {
    position: fixed;
    img{
      display: block;width: 1rem;height: 1.3rem;
    }
}

ps：实现原理其实很简单，css3向下飘落动画