如何使用less实现随机下雪动画详解


Posted in Javascript onJanuary 02, 2019

前言

元旦在公司撸码,想起圣诞节的摇摇乐项目有段代码挺有意思的,借着空闲的时间把代码抽出来,沉淀下经验。

冬天来了,设计师说摇摇乐的场景需要随机下落的雪花动画,第一时间就想到的方法是canvas比较好,项目非常紧急,然而小程序对canvas支持不够友好,容易在项目中出现无法预估的兼容性问题 ,马上又否定了这种想法,想了想用javascript来写随机动画成本又高。既不用canvas也不用javascript来实现,最终决定使用css预处理器less来实现随机雪花,less怎么可能实现随机雪花?对于喜欢写css的人来说,这非常有趣。

如何使用less实现随机下雪动画详解

上图的雪花效果还蛮炫酷吧,怎么实现呢?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 文件中使用,可以通过反引号的方式使用

于是有了如下随机位移、随机时间、随机大小的代码

left: ~"`Math.round(Math.random() * @{windowWidth})`px";
animation: ~"snowani_@{n} `(-Math.random() * 4 + 8).toFixed(2)`s linear infinite";
transform: ~"scale(`(Math.random() * 0.7 + 0.5).toFixed(2)`)";

于是有了如下的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实现随机下雪动画详解

还有HTML,一行代码的事情

在编辑器中安装好emmet或webstorm开启emmet后,输入下面代码按下ctrl+e快捷键即可生成60个不同命名的雪花标签。

.snow_wrap>.snow.snow_$*60

如何使用less实现随机下雪动画详解

软件开发没有银弹,不要让经验固化了我们的思维,相信还有更多更好的实现方式,来提升我们的开发效率。

新年第一弹,新的开始,猪大家元旦快乐,抽中摇摇乐免单,身体健康,大吉大利。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
jQuery链使用指南
Jan 20 Javascript
javascript常用功能汇总
Jul 05 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
详解Vue2 添加对scss的支持
Jan 02 #Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 #Javascript
JS中数据结构之栈
Jan 01 #Javascript
微信小程序自定义导航栏
Dec 31 #Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 #Javascript
JavaScript ES6箭头函数使用指南
Dec 30 #Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 #Javascript
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php日历制作代码分享
2014/01/20 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
js arguments.callee的应用代码
2009/05/07 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
经典的班主任推荐信
2013/10/28 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
员工自我工作评价
2015/03/06 职场文书
欢迎新生标语2015
2015/07/16 职场文书
简短清晨问候语
2015/11/10 职场文书
网络研修随笔感言
2015/11/18 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技