元旦在公司撸码,想起圣诞节的摇摇乐项目有段代码挺有意思的,借着空闲的时间把代码抽出来,沉淀下经验。
冬天来了,设计师说摇摇乐的场景需要随机下落的雪花动画,第一时间就想到的方法是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错误的编译,我们需要了解两个点。

  1. 一些 LESS不认识的专有语法,可以在字符串前加上一个 ~,
  2. 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:;
margin:;
}
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:;
top:;
width:20px;
height: 20px;
background-color:#fff;
opacity:;
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

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

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

【原】使用less实现随机下雪动画的更多相关文章

  1. 使用JavaScript和Canvas实现下雪动画效果

    该下雪动画效果使用了HTML5中Canvas画布实现,其中涉及了物理学中曲线运动的相关知识与运算. index.html <!DOCTYPE html> <html lang=&qu ...

  2. Android下雪动画的实现

    原文链接 : Snowfall 原文作者 : Styling Android 译文出自 : hanks.xyz 译者 : hanks-zyh 校对者: desmond1121 状态 : 完毕 这本是一 ...

  3. 【原】iOS学习44之动画

    1. 简单动画 1> UIImageView GIF 动画 GIF图的原理是:获取图片,存储在图片数组中,按照图片数组的顺序将图片以一定的速度播放 UIImageView *showGifima ...

  4. (原)Unreal源码搬山-动画篇 自定义动画节点(一)

    @author:黑袍小道 太忙了,来更新下,嘿嘿 前言: 本文是接着上文 Unreal搬山之动画模块_Unreal动画流程和框架,进行简单入门如何自定义动画图标的AnimNode. 正文: 一.Ani ...

  5. IOS 下雪动画修改版本

    #define SNOW_IMAGENAME @"snow" #define IMAGE_X arc4random()%(int)Main_Screen_Width #define ...

  6. IOS 下雪动画

    #define SNOW_IMAGENAME @"snow" #define IMAGE_X arc4random()%(int)Main_Screen_Width #define ...

  7. pygame 方块随机飞舞动画

    import pygame import random # default WIDTH=1280 HEIGHT=1060 FPS=60 sum=0 # set color WHITE=(255,255 ...

  8. Android群英传笔记——第七章:Android动画机制和使用技巧

    Android群英传笔记--第七章:Android动画机制和使用技巧 想来,最 近忙的不可开交,都把看书给冷落了,还有好几本没有看完呢,速度得加快了 今天看了第七章,Android动画效果一直是人家中 ...

  9. WPF简单模拟QQ登录背景动画

    介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图 大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.把 ...

随机推荐

  1. Java对象和Excel转换工具XXL-EXCEL

    <Java对象和Excel转换工具XXL-EXCEL> 一.简介 1.1 概述 XXL-EXCEL 是一个灵活的Java对象和Excel文档相互转换的工具. 一行代码完成Java对象和Ex ...

  2. 虚拟机中克隆后使用eth0

    1.修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=mini1 1.修改ip地址以及udev记录网络规则的脚本 在CentOS中,ude ...

  3. TensorFlow-谷歌深度学习库 命令行参数

    程序的入口: tf.app.run tf.app.run( main=None, argv=None ) 运行程序,可以提供'main'函数以及函数参数列表.处理flag解析然后执行main函数. 什 ...

  4. PAT1115:Counting Nodes in a BST

    1115. Counting Nodes in a BST (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...

  5. capwap学习笔记——capwap的前世今生(转)

    1 capwap的前世今生 1.1 胖AP.瘦AP.AC 传统的WLAN网络都是为企业或家庭内少量移动用户的接入而组建的.因此,只需要一个无线路由器就可以搞定了,就好像现在家用的无线路由器就是胖AP. ...

  6. 用R语言进行文本挖掘和主题建模

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 我们每天都会遇到各种各样的文本数据,但大部分是非结构化的,并不是全部都是有价值的. 据估计,全球约80%的数据是非结构化的.这包括音频,视频 ...

  7. linux,windows下检测指定的IP地址是否可用或者检测IP地址冲突的3种方式(批处理程序,python程序,linux shell 批量ping)

    本文中的脚本适用范围: 1)检测某些IP地址是否被占用: 2)检测网络中某些设备是否存活: 3)在分配新的ip地址之前,批量检测环境中是否存在冲突的机器 以上检测基于ICMP Ping报文,要求所有的 ...

  8. Spring Boot中使用Actuator的/info端点输出Git版本信息

    对于Spring Boot的Actuator模块相信大家已经不陌生了,尤其对于其中的/health./metrics等强大端点已经不陌生(如您还不了解Actuator模块,建议先阅读<Sprin ...

  9. javascript 面向对象程序设计--深刻理解对象

    javascript中,每个对象都是基于一个引用类型创建的,我们可以把ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数. 深刻理解对象 创建自定义对象的最简单方式就 ...

  10. linux下如何配置yum源

    first:挂载本地镜像文件(挂载:意为将某个文件放置在系统的一个目录下) mkdir     /media/cdrom  #新建镜像文件挂载目录 cd         /usr/local/src  ...