我正在try 将div的每个子级转换为不同的百分比:
#letters:nth-child(n){
transition: all 1s ease;
transform: translateX(calc(n*10%));
transition-delay: calc(n*200ms);
}
transform和transition-delay似乎都不起作用(所有字母的延迟都相等)，但值transform也返回错误`Mismatted PARAMETERS().如何修复它？
我更喜欢使用一个css变量:
/* somewhere in base.css to number of maximum children you want to handle, could be generated with SASS for example */
:nth-child(1){
--child-index: 1;
}
:nth-child(2){
--child-index: 2;
}
/* your current CSS */
li{
transform: translateX(calc(var(--child-index)*10%))
}<ul>
<li>I'm the first child</li>
<li>I'm the second child</li>
</ul>