Write a red envelope rain effect with CSS animation

I believe we all have done the function of red envelope rain, but they are usually calculated with JS, and write similar ones with CSS style, mainly using CSS transform and animation combination. General code logic:

@keyframes startHB {
  0% {
    transform: translateY(-300px);
    -ms-transform:translateY(-300px);
    -webkit-transform:translateY(-300px);
  }
  100% {
    transform: translateY(100vh);
    -ms-transform:translateY(100vh);
    -webkit-transform:translateY(100vh);
  }
}
@keyframes chandou{
    0%{margin-left:-120px}
    50%{margin-left:0px}
    100%{margin-left:120px}
}

$total: 100;
@for $i from 1 through $total {
  .hbsd-#{$i}{
      animation: startHB #{$i/20}s linear infinite,chandou #{$i/20}s infinite linear alternate both;
      -ms-animation:startHB #{$i/20}s linear infinite,chandou #{$i/20}s infinite linear alternate both;
      -webkit-animation:startHB #{$i/20}s linear infinite,chandou #{$i/20}s infinite linear alternate both;}}Copy the code

Full code address: github.com/BothEyes199…