我在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)+"%");
}
}
}