最近想实现一个css3动画的函数，但是创建@keyframe时，老是碰到一个问题，就是将函数function作为参数传递。研究了半天，发现可以这样写。
.function-name(@function-param){
@function-param();
}
.function-name({
});
不过这种写法不能用于普通的函数参数传递，目前只发现适用于keyframes动画，看下面
/**
* animation
*/
.keyframes (@prefix,@name,@content) when (@prefix=def) {
@keyframes @name {
@content();
}
}
.keyframes (@prefix,@name,@content) when (@prefix=moz) {
@-moz-keyframes @name {
@content();
}
}
.keyframes (@prefix,@name,@content) when (@prefix=o) {
@-o-keyframes @name {
@content();
}
}
.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
@-webkit-keyframes @name{
@content();
}
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {
.keyframes(moz,@name,@content);
.keyframes(o,@name,@content);
.keyframes(webkit,@name,@content);
.keyframes(def,@name,@content);
}
然后我们如何创建不同各种浏览器内核的@keyframes呢？
.keyframes(all,zindex,{
from{z-index :100;}
to{z-index: -100}
});
解析之后，就生成了下面这样的css。
@-moz-keyframes zindex {
from {
z-index: 100;
}
to {
z-index: -100;
}
}
@-o-keyframes zindex {
from {
z-index: 100;
}
to {
z-index: -100;
}
}
@-webkit-keyframes zindex {
from {
z-index: 100;
}
to {
z-index: -100;
}
}
@keyframes zindex {
from {
z-index: 100;
}
to {
z-index: -100;
}
}
这是不是你想要的呢？嘻嘻，快拿去用吧~
