如何使用less实现随机下雪动画详解
导读： 1.递归调用 实际上less并没有自带类似javascript的for循环的功能，但less可以用过引导when来实现条件判断，简单的方法也可以让聪明的程序员简单实现递归调用 .snow(@n when(@n˃0 { ...
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);
//生成雪花的数量声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用less实现随机下雪动画详解
本文地址： https://pptw.com/jishu/664707.html