为了不便调试,先全局装置一个less
- npm install -g less
- 创立
style.less
文件,写入less语法 - 应用
lessc styles.less styles.css
将less文件编译成css文件
须要一个0%到100%的每一帧动画
代码:
.mask(@n) when (@n =< 100%) { @{n} { mask: linear-gradient( 90deg, #000 @n, transparent 10%, transparent 10% ); width: @n; } .mask(@n+1); } @keyframes maskMove { .mask(0%); }
css文件输入后果
@keyframes maskMove { 0% { mask: linear-gradient(90deg, #000 0%, transparent 10%, transparent 10%); width: 0%; } 1% { mask: linear-gradient(90deg, #000 1%, transparent 10%, transparent 10%); width: 1%; } 2% { mask: linear-gradient(90deg, #000 2%, transparent 10%, transparent 10%); width: 2%; } 3% { mask: linear-gradient(90deg, #000 3%, transparent 10%, transparent 10%); width: 3%; } 4% { mask: linear-gradient(90deg, #000 4%, transparent 10%, transparent 10%); width: 4%; } 5% { mask: linear-gradient(90deg, #000 5%, transparent 10%, transparent 10%); width: 5%; }...... 99% { mask: linear-gradient(90deg, #000 99%, transparent 10%, transparent 10%); width: 99%; } 100% { mask: linear-gradient(90deg, #000 100%, transparent 10%, transparent 10%); width: 100%; }