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

 更新时间:2019年01月02日 11:44:57   作者:白树   我要评论

这篇文章主要给大家介绍了关于如何使用less实现随机下雪动画的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

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

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

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

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);//生成雪花的数量

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

还有HTML,一行代码的事情

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

.snow_wrap>.snow.snow_$*60


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

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

总结

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

相关文章

  • Javascript 判断Flash是否加载完成的代码

    Javascript 判断Flash是否加载完成的代码

    网站加入flash广告代码,利用DIV层来控制进度的状态,如果加载swf文件到100%的时候就显示出flash,把AD层隐藏掉,请看下面实现方法。
    2010-04-04
  • JavaScript通过元素的ID和name设置样式

    JavaScript通过元素的ID和name设置样式

    这篇文章主要介绍了JavaScript通过元素的ID和name设置其样式,下面有个不错的示例,感兴趣的朋友可以测试下
    2014-07-07
  • javascript框架设计读书笔记之模块加载系统

    javascript框架设计读书笔记之模块加载系统

    本文是司徒正美的《javascript框架设计》的第二章模块加载系统的读书笔记,根据自己的理解,简要的跟大家讲述了本章的主要内容,方便大家更好的学习。
    2014-12-12
  • 基于javascript实现全国省市二级联动下拉选择菜单

    基于javascript实现全国省市二级联动下拉选择菜单

    这篇文章主要介绍了基于javascript实现全国省市二级联动下拉选择菜单,以一个完整实例形式较为详细的分析了js实现省市二级联动下拉菜单的实现技巧,非常简单实用,需要的朋友可以参考下
    2016-01-01
  • 聊聊JavaScript如何实现继承及特点

    聊聊JavaScript如何实现继承及特点

    “继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。这篇文章主要介绍了聊聊JavaScript如何实现继承及特点,有兴趣的可以了解一下。
    2017-04-04
  • JS+DIV实现的卷帘效果示例

    JS+DIV实现的卷帘效果示例

    这篇文章主要介绍了JS+DIV实现的卷帘效果,结合具体实例形式对比分析了javascript响应鼠标事件动态操作页面元素属性实现展开与折叠效果的相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • 基于JavaScript定位当前的地理位置

    基于JavaScript定位当前的地理位置

    这篇文章主要为大家详细介绍了基于JavaScript定位当前的地理位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • js将当前时间格式化为 年-月-日 时:分:秒的实现代码

    js将当前时间格式化为 年-月-日 时:分:秒的实现代码

    这篇文章主要介绍了js将当前时间格式化为 年-月-日 时:分:秒主要是使用js的Date()对象,将系统当前时间格式化为年-月-日 时:分:秒,需要的朋友可以参考下
    2018-01-01
  • js数值计算时使用parseInt进行数据类型转换(jquery)

    js数值计算时使用parseInt进行数据类型转换(jquery)

    这篇文章主要介绍了js数值计算时使用parseInt进行数据类型转换(jquery),需要的朋友可以参考下
    2014-10-10
  • Javascript中常用类型的格式化方法小结

    Javascript中常用类型的格式化方法小结

    这篇文章主要给大家介绍了Javascript中常用类型的格式化方法,其中包括格式化浮点数、格式化有符号整数(int32)、格式化无符号整数(uint32)、格式化布尔值以及格式化字符串等,文中给出了详细的示例代码,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12

最新评论