Less 创建css3动画@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(all,zindexName,{
from{z-index :;}
to{z-index: -}
});

调用:

-webkit-animation: zindexName 0.6s linear .1s ;

https://www.jianshu.com/p/b19682ba87e2

less 语法

https://www.cnblogs.com/feng-wu/p/6040387.html

上一篇:python中列表、元组、字典内部功能介绍


下一篇:微服务与容器化Docker