怎样运用less完成随机下雪动画详解【html5教程】

冬季来了，设想师说摇摇乐的场景须要随机着落的雪花动画，第一时候就想到的要领是canvas比较好，项目异常紧要，但是小顺序对canvas支撑不够友爱，轻易在项目中涌现没法预估的兼容性问题，立时又否认了这类主意，想了想用javascript来写随机动画本钱又高。既不必canvas也不必javascript来完成，终究决议应用css预处理器less来完成随机雪花，less怎样可能完成随机雪花？关于喜好写css的人来讲，这异常风趣。【引荐教程：CSS教程】

上图的雪花结果还蛮炫酷吧，怎样完成呢？less由于有以下的2个特性，能够尝试应用它来完成我们的场景

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: 0 auto;
 }
 //雪花初始化大小
 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)`s linear infinite";
 //动画提早进场时候，也就是垂直方向上位移
 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);//生成雪花的数目

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