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;

}