用css動畫寫一個下紅包雨的效果

紅包雨的功能相信大家都做過，不過一般都是用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;
    
  }
  }複製程式碼

完整程式碼地址：github.com/BothEyes199…

來源：https://juejin.im/post/5c37a3ebe51d45524648b150