scss实现简单的红包雨效果

     .redcont {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40vw;
        overflow: hidden;
        $total: 40;
        @for $i from 0 through $total {
          .yudi#{$i} {
            position: absolute;
            opacity: 0;
            left: #{random(120)-20}vw;
            top: #{random(55)-40}vw;
            transform: rotate(#{random(90) - 45}deg);
            animation: drops #{random(5) + 1}s infinite; /*动画效果*/
            /*红包样式*/
            width: #{random(5) + 4}vw;
            img {
              width: 100%;
            }
          }
        }
      }
      @keyframes drops {
        0% {
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        90% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate3d(#{random(4)}vw, #{random(30) + 20}vw, -10px);
        }
      }