怎样运用less实现随机下雪动画详解

冬天来了，设计师说摇摇乐的场景需要随机着落的雪花动画，首先工夫就想到的办法是canvas比拼好，项目非常危急，然而小程序对canvas支撑不足友爱，容易在项目中涌现没法预估的兼容性题目， 冬天来了，设计师说摇摇乐的场景需要随机着落的雪花动画，首先工夫就想到的办法是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);//生成雪花的数目

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

以上就是这篇文章的全部内容了，但愿本文的内容对大家的学习或者工作拥有一定的参照 学习价值，要是有疑难大家可以留言交换。

以上就是怎样运用less实现随机下雪动画详解的细致内容，更多请关注 百分百源码网 其它相干文章！