紅包雨的功能相信大家都做過，不過一般都是用js計算的，閒著無聊用css的樣式寫了類似的，主要用的是css的transform和animation結合。大概程式碼邏輯：

@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;
    }
}
 

完整程式碼地址：
https://github.com/BothEyes1993/hongbao