为了方便调试,先安装一个lessnpminstall-gless全局创建一个style.less文件,写less语法,使用lesscstyles.lessstyles.css将less文件编译成css文件需要0%到100%每帧动画代码:.mask(@n)when(@n=<100%){@{n}{mask:linear-gradient(90deg,#000@n,transparent10%,transparent10%);宽度:@n;}.mask(@n+1);}@keyframesmaskMove{.mask(0%);}css文件输出结果@keyframesmaskMove{0%{mask:linear-gradient(90deg,#0000%,transparent10%,transparent10%);宽度:0%;}1%{mask:linear-gradient(90deg,#0001%,transparent10%,transparent10%);宽度:1%;}2%{mask:linear-gradient(90deg,#0002%,transparent10%,transparent10%);宽度:2%;}3%{mask:linear-gradient(90deg,#0003%,transparent10%,transparent10%);宽度:3%;}4%{mask:linear-gradient(90deg,#0004%,transparent10%,transparent10%);宽度:4%;}5%{mask:linear-gradient(90deg,#0005%,transparent10%,transparentt10%);宽度:5%;}......99%{mask:linear-gradient(90deg,#00099%,transparent10%,transparent10%);宽度:99%;}100%{mask:linear-gradient(90deg,#000100%,transparent10%,transparent10%);宽度:100%;}
