css3+less
随机动画总结
前⾔
有个动画需求，有⼏个div，需要不同时，不同幅度移动，⽤了css3+less实现
重点
使⽤~``，``内可嵌⼊js代码，获得的内容可以做keyframes 名字，也可以当作数字参与less的其他计算，但是获得的内容不能当作class 名字
编译前
.move  (@random ) {
@name: ~`'an-div-move-@{random}'`;
@keyframes  @name  {
0% {
transform : translate(0, 0);
}
50% {
transform : translate(0, @random /1000+.3rem );
}
100% {
transform : translate(0, 0);
}
}
js控制css3动画触发@s: ~`Math.random()`;
animation : @name  linear 8s  infinite @s *5*1s ;
}
.div-1 {
.move ( `~und(Math.random()*1000)`);
}
.div-2 {
.move (~`und(Math.random()*1000)`);
}
.div-3 {
.move (~`und(Math.random()*1000)`);
}
编译后
.div-1 {
animation: an-div-move--611 linear 8s infinite 4.82357906s;
}
@keyframes an-div-move--611 {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, -0.311rem);
}
100% {
transform: translate(0, 0);
}
}
.div-2 {
animation: an-div-move-493 linear 8s infinite 1.7538035s;
}
@keyframes an-div-move-493 {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 0.793rem);
}
100% {
transform: translate(0, 0);
}
}
.div-3 {
animation: an-div-move-557 linear 8s infinite 4.65403445s;
}
@keyframes an-div-move-557 {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 0.857rem);
}
100% {
transform: translate(0, 0);
}
}
总结
在vue-cli中不能使⽤，直接less编译可以，可以⽤在webpack⾃⼰配置的项⽬中但是不知道为什么可以这么写，没到官⽅的说明
⽂章来源：开发⼩组

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。