用 LESS 写帧动画 LESS LOOP KEYFRAMES ANIMATION SINGLE & DOUBLE LOOP 单层 & 双层 循环

前言

LESS 的循环处理网上资料不多，抄起来比较麻烦 总结了 2 套常用的
复制代码

多图帧动画

即多张图片形成的帧动画
复制代码

引用

此处参考了 shawndxl 的 文章

keyframes 代码：

@keyframes fireworks {
    .circle(118);
    .circle(@n, @i:0) when (@i < @n) {
        @j: @i + 1; // 图片从1.png开始，比如 @n 为 45，则最后一张加载的为 45.png

        @a: @n - 1; // 通过 图片数 - 1 算出 0% ~ 100% 中选择器的数目
        @b: 1 / @a * 100; // 小数 * 100 换算成百分数的分子；
        @c: @b * @i; // 具体到各个 % 选择器的分子࿱