我想做一个可重用的 sass 函数,让我可以轻松编写@keyframes
css 动画,无需编写太多代码,但我不知道如何去做,尤其是数学部分。
我有一个包含带有此 css 的单个背景图像的 div
height: 100vh;
width: 8000px;
该背景图像由 25 帧组成。所以每个框架的宽度是 320px。
动画应该translateX()
每 4% 的 div 为 320px 的倍数,所以像这样:
@keyframes animation {
0% {
transform:translateX(0);
}
4% {
transform:translateX(-320px);
}
8% {
transform:translateX(-640px);
}
...
}
我想为此创建一个函数,但我对 scss 函数很陌生,我真的不知道从哪里开始。如果有人能给我一个提示那就太好了!
thanks
可能会更好(模块化),但这里适合您;
@mixin deneme($i){
@for $i from 0 through 100/$i {
#{$i * 4}% {
transform:translateX(#{-320 * $i});
}
}
}
UPDATE:
我觉得这个好一点。
@mixin deneme($increase, $angle){
@for $x from 0 through 100/$increase {
#{$x * $increase }% {
transform:translateX($angle * $x);
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)