有人求写个css3循环的keyframes的动画插件！需求是这样的！

可能需要用到很多的切换背景效果！

我们要做的是，不管传多少图片，就根据图片的数量来分割百分比

然后生成不同的css动画！ 名字亦需要重定义！

开始

1、写好规划

@name{

 0%{}

....

100%{}

}

算了！应用不广，直接上代码了！

2代码

@us: '../assets/images/dangao_photo1.png', '../assets/images/dangao_photo2.png', '../assets/images/dangao_photo1.png';
.css3(aa, @us);


/*
 @name：即为运动的名字
 @img:图的数组，有多少个图则会生成 100/图length的 运动;
*/

.css3(@name, @img) {
    @keyframes @name {
        .css4(@img);
    }
}

.css4(@img, @i: 1, @b: 0%) when (@i<=length(@img)) {
	@size: 100/(length(@img)-1);
	@imgs:extract(@us,@i);
    @{b} {
        background-image:url('@{imgs}');
    }
    .css4(@img, @i + 1, @b+ @size)
}

即可生成

@keyframes aa {
    0% {
        background-image: url(../assets/images/dangao_photo1.png)
    }

    50% {
        background-image: url(../assets/images/dangao_photo2.png)
    }

    100% {
        background-image: url(../assets/images/dangao_photo1.png)
    }
}