less实现背景图序列帧动画——条件判断

.sequence-frame(@len, @i) when (@i < @len) and (@i < 9) {

@x: round(@i * 100 / (@len - 1), 2); // 当前百分比

@selector: e(

"@{x}%"

); // 使用 less e 函数变为选择器,注意！！直接套用或者使用 percentage 函数无法识别；当前百分比进度

@y: (@i + 1);

@{selector} {

background: url('./标题bg/标题_0000@{y}.png') no-repeat 0 0;

background-size: contain;

}

.sequence-frame(@len, (@i + 1));

}

 

.sequence-frame(@len, @i) when (@i < @len) and (@i >= 9) {

@x: round(@i * 100 / (@len - 1), 2); // 当前百分比

@selector: e(

"@{x}%"

); // 使用 less e 函数变为选择器,注意！！直接套用或者使用 percentage 函数无法识别；当前百分比进度

@y: (@i + 1);

@{selector} {

background: url('./标题bg/标题_000@{y}.png') no-repeat 0 0;

background-size: contain;

}

.sequence-frame(@len, (@i + 1));

}

 

@keyframes animat {

.sequence-frame(74,0);

}

 

.sequence-bg {

animation: animat 2s infinite;

}