电话
13363039260
如何使用less实现随机下雪动画详解
2024-01-17 15:58 小编
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);//生成雪花的数量
猜你喜欢
联络方式：
13363039260
微信二维码 