落叶与雪花

//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>