如何使用less实现随机下雪动画详解

1.递归调用

实际上less并没有自带类似javascript的for循环的功能，但less可以用过引导when来实现条件判断，简单的方法也可以让聪明的程序员简单实现递归调用

.snow(@n)when(@n>0){

fn()//生成雪花函数fn(

.snow((@n-1));//再次执行函数fn()

}

.snow(60);//执行次数

2.避免编译JavaScript表达式

雪花需要生成的随机数，我们需要运用javascript表达式嵌入到less代码，同时也要避免javascript表达式被less错误的编译，我们需要了解两个点。

一些LESS不认识的专有语法，可以在字符串前加上一个~，

JavaScript表达式在less文件中使用，可以通过反引号的方式使用

于是有了如下随机位移、随机时间、随机大小的代码

于是有了如下的Less代码，具体怎么实现请留意详细的代码注释

以下less代码使用构建后可生产一份随机css固定雪花文件，决定了每一个雪花有不同的大小、水平位移、垂直位移、出场位置、出场时间，不同的雪花大小，不同的下落速度，用肉眼看到的雪花就像是随机的，可以在项目上线前尝试多构建几次，得到一份均匀分布在窗口的随机雪花。

*{

padding:0;

margin:0;

}

html,body{

height:100%;

}

//浏览器窗口宽度

@windowWidth:750;

//雪花

.snow{

&_wrap{

position:relative;

width:~"@{windowWidth}px";

height:100%;

overflow:hidden;

background:rgba(14,99,69,1);

margin:0auto;

}

//雪花初始化大小

position:absolute;

width:20px;

height:20px;

&:after{

content:'';

position:absolute;

left:0;

top:0;

width:20px;

height:20px;

background-color:#fff;

opacity:1;

border-radius:100%;

filter:blur(5px);//此处使用css3滤镜来画雪花

}

}

//随机雪花函数

.snow(@n)when(@n>0){

.snow_@{n}{

//水平方向上的位移

left:~"`Math.round(Math.random()*@{windowWidth})`px";

//动画运行时间8~12秒，保证雪花有不同的移动速度

animation:~"snowani_@{n}`(-Math.random()*4+8).toFixed(2)`slinearinfinite";

//动画提前出场时间，也就是垂直方向上位移

animation-delay:~"`(-Math.random()*8+0.2).toFixed(2)`s";

&:after{

//雪花大小随机，0.5~1.2

transform:~"scale(`(Math.random()*0.7+0.5).toFixed(2)`)";

}

}

@keyframes~"snowani_@{n}"{

0%{

transform:translateY(0);

}

100%{

//垂直方向上高度，保证雪花有不同的移动速度

transform:~"translateY(`Math.round(Math.random()*200+1600)`px)";

}

}

.snow((@n-1));

}

.snow(60);//生成雪花的数量

把上面的雪花的代码构建后如下：

13661853-e09bb0c194c3f663.gif

还有HTML，一行代码的事情

在编辑器中安装好emmet或webstorm开启emmet后，输入下面代码按下ctrl+e快捷键即可生成60个不同命名的雪花标签