用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;

    }

}

完整代码地址：

https://github.com/BothEyes1993/hongbao

巴特西

用css动画写一个下红包雨的效果

最新文章

热门文章