用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