如何用更少的资源实现随机雪景动画

前言

在公司过年，想到圣诞节摇摆音乐项目中的一段代码，很有意思。利用空闲时间提取代码，沉淀体验。

冬天来了，设计师说摇摆音乐的场景需要雪花动画随机落下，第一个想到的是画布比较好，项目很急。但是小程序不够友好，不支持canvas，在项目中很容易出现意想不到的兼容性问题，立刻拒绝了这个想法。想了想，用javascript写随机动画成本高。没有画布和javascript，决定少用css预处理器实现随机雪花。如何才能少实现随机雪花？对于喜欢写css的人来说，这个很有意思。

上图的雪花效果挺酷的。如何实现？Less有以下两个特点，所以我们可以尝试用它来实现我们的场景

1.递归调用

事实上，less并不具备类似于javascript的for循环的功能，但是less可以使用boot when来实现条件判断，而简单的方法也可以让聪明的程序员简单地实现递归调用。snow(@n)当(@n 0) {fn()//生成雪花函数fn()。雪((@ n-1))；//执行函数fn()}。又下雪了(60)；//执行次数2。避免编译JavaScript表达式

雪花需要生成随机数。我们需要在更少的代码中嵌入javascript表达式，同时避免javascript表达式被less错误编译。我们需要知道两点。

一些less不知道的专有语法可以在前面加一个~，JavaScript表达式可以用在LESS文件中，也可以通过反引号的方式使用，所以有下面这些随机位移、随机时间、随机大小的代码。

left : ~ ' ` math . round(math . random()* @ { window width })` px '；animation : ~ '[email protected]{ n } `(-math . random()* 4 8)。toFixed(2)`线性无限'；transform : ~ ' scale(`(math . random()* 0.7 0.5)。toFixed(2)`)'；所以有下面的Less代码。请注意如何实现它的详细代码注释

下面的少代码可以在构造后产生一个随机的css固定雪花文件，它决定了每片雪花的大小、水平位移、垂直位移、出现位置、出现时间、雪花大小、下落速度都不一样。肉眼看到的雪花是随机的，可以在项目上线前尝试多次搭建，得到一片随机均匀分布在窗口的雪花。

* { padd : 0；margin : 0；}html，正文{ height : 100%；}//浏览器窗口宽度@ windowWidth: 750//雪花. { _ wrap {位置：相对；width: ~ ' @ { windowWidth } px高度： 100%；飞越：隐藏；背景： rgba(14，99，69，1)；margin: 0 auto}//雪花初始化大小position:绝对值；宽度：20 px；height: 20px:在{ content : }之后；绝对位置：left:0top:0宽度：20 px；height: 20px背景-color : # fff；opacity:1边界半径： 100%；filter : blur(5px)；//使用css3滤镜在这里画雪花} }//随机雪花功能。snow (@ n)当(@ n 0){[email protected]{ n } {//水平位移left : ~ ' ` math . round(math . random()* @ { window width })//动画运行8~12秒，保证雪花有不同的移动速度。动画： ~ '[电子邮件保护]{ n } `(-数学。random () * 4 8)。Tofixed (2)`线性无限；//动画提前出来，也就是被动画-延时： ~ ' `(-数学)取代。random () * 8 0.2)。垂直方向上的固定(2 );after{ //雪花大小随机，0.5 ~ 1.2变换： ~ '刻度(`(数学。random()* 0.70.5)。to fixed(2)`)'；} } @个关键帧~ '[email protected]{ n } ' { 0% { transform : translateY(0)；}垂直方向100%{ //高度，保证雪花有不同的移动速度。变换： ~ '翻译y(`数学。圆(数学。random()* 200 1600)` px '；} } .雪((@ n-1))；}.雪(60)；//生成雪花的数量上面雪花的代码构造如下：

和HTML，一行代码

在编辑器中安装emmet或webstorm启动emmet后，输入以下代码并按ctrl e快捷键，生成60个不同名称的雪花标签。snow _ wrap . snow . snow _ $ * 60

软件开发没有灵丹妙药。不要让经验固化我们的思维。我相信有更多更好的方法来提高我们的开发效率。

除夕夜，新的开始，祝所有猪都元旦快乐，免费，健康繁荣。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。