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);//生成雪花的数量