如何将Scss动画转换为Postcss?

时间:2020-09-08 10:23:42

标签: css sass css-animations postcss

我在codepen上找到了这个五彩纸屑动画。我在我的项目中使用postcss。如何将scss代码转换为postcss?我需要更改什么?我需要哪些postcss插件才能正常工作?

$colors: (#d13447, #ffbf00, #263672);

@for $i from 0 through 150 {
  $w: random(8);
  $l: random(100);
  .confetti-#{$i} {
    width: #{$w}px;
    height: #{$w*0.4}px;
    background-color: nth($colors, random(3));
    top: -10%;
    left: unquote($l+"%");
    opacity: random() + 0.5;
    transform: rotate(#{random()*360}deg);
    animation: drop-#{$i} unquote(4+random()+"s") unquote(random()+"s");
  }

  @keyframes drop-#{$i} {
    100% {
      top: 110%;
      left: unquote($l+random(15)+"%");
    }
  }
}

0 个答案:

没有答案