如何使用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

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

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

总结

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

(0)

相关推荐

  • Vue项目中引入外部文件的方法(css、js、less)

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • 前端构建 Less入门(CSS预处理器)

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览器和 Rhino 平台上.网上有很多第三方工具帮助你编译 Less 源码. 一.前言 说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scss.Sass.Stylus和Less.(最近还听说出现了Autoprefixer等CSS后处理器,可参考@一丝的PPT) 众多CSS预处理

  • js中less常用的方法小结

    1.color 解析颜色 把代表颜色的字符串转换为颜色值 @c:'#000' .box{ background:color(@c) } 2.data-uri 把我们需要使用的素材图片转化成BASE64编码 ,项目中尤其是移动端的项目,节省了图片的加载时间,是图片优化的一个手段:LESS对于大图片是不能转码的,我们可以使用BASE64工具转码(tool.css-js.com) 项目中慎用,当你在移动端项目中有一些大图实在没有办法处理了的情况下在使用BASE64. @c:'#000' @url:'.

  • 浅谈vue引入css,less遇到的坑和解决方法

    在使用vux开发手机页面时,引入vux的公共样式less一直报错,通过各种百度,Google都没有解决,走了很多弯路.最后才发现钻牛角尖了,可以换一种方法引入. 1.报错的使用:在App中 @ ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vux/src/styles/reset. less 3:10-115 @ ./~/css-loader?{"minimize":false,&

  • VueJS如何引入css或者less文件的一些坑

    我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在"main.js"里使用AMD的方式引入,即 require('./assets/css/main.less'); 这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析 这时,我们要填写上依赖, require('!style!css!less!./assets/css/main.less'); 在很多以前的博客里都

  • 微信小程序 less文件编译成wxss文件实现办法

    less文件编译成微信小程序wxss文件 2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜. 在做demo小示例的过程中,我发现了一个极为让人为难的事儿:**如何让 less/sass 文件转成小程序的 wxss 文件**.</font> 对于基本不使用原生css,而习惯编写less的我,这个事儿让我的样式编写相当的吃力. 在尝试配置koala (一个可以编译less

  • vuejs如何配置less

    本次我们来聊聊,vuejs里如何使用less.都是根据自己的开发经验来写,不对的地方请各位拍砖. 在webstorm上配置Less 首先,全局安装less npm install less -g 然后,在webstorm上配置less插件,"File" --> "settings"-->"Tools" 在"file Watchers" -->"+"-->"Less"

  • vue2中使用less简易教程

    首先,说明一点,如果是使用npm init webpack 项目名 的方式创建的项目,无需手动配置webpack 所以再vue中使用less就非常简单了,只需要安装less, less-loader就行了 步骤 npm install less less-loader --save //将less和less-loader安装到开发依赖 npm run dev 如果安装成功那么就可以再vue组件中使用less了 <style lang="less" scoped> .hell

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

    前言 元旦在公司撸码,想起圣诞节的摇摇乐项目有段代码挺有意思的,借着空闲的时间把代码抽出来,沉淀下经验. 冬天来了,设计师说摇摇乐的场景需要随机下落的雪花动画,第一时间就想到的方法是canvas比较好,项目非常紧急,然而小程序对canvas支持不够友好,容易在项目中出现无法预估的兼容性问题 ,马上又否定了这种想法,想了想用javascript来写随机动画成本又高.既不用canvas也不用javascript来实现,最终决定使用css预处理器less来实现随机雪花,less怎么可能实现随机雪花?对

  • Android 三种动画详解及简单实例

    Android 三种动画详解 帧动画 一张张图片不断的切换,形成动画效果 在drawable目录下定义xml文件,子节点为animation-list,在这里定义要显示的图片和每张图片的显示时长 <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="

  • [jQuery] 事件和动画详解

    1. 事件 1.1 加载DOM 在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件.在JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法.$(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的.window.onload方法是在网页中所有的元素完全加载到浏览器后才执行,而$(document).ready()方法注册的事件处理程

  • javascript如何使用函数random来实现课堂随机点名方法详解

    如何使用函数random来实现课堂随机点名 1.最初的样子如下 2.点击开始点名,上面一行的文字变成名字,名字在不停的变化,开始点名变成停止点名,如下 3.点击停止点名,上面名字不动,停止点名变成开始点名,如下:李四同学回答老师问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #d2{

  • Python实现随机生成图片验证码详解

    使用python生成一个图片验证码,随机的,可以由于验证人机和别的啊,很方便很简单 导入模块 import random from PIL import Image,ImageFont,ImageDraw 生成随机验证码 def rndtxt(): txt_list = [] # 大写字母 txt_list.extend([i for i in range(65,90)]) # 小写字母 txt_list.extend([i for i in range(97,123)]) # 数字 txt_l

  • Android开发之自定义加载动画详解

    目录 一.demo简介 二.分析贪吃动画的尺寸比例 三.画圆 四.实现张嘴闭嘴动画 五.小球移动动画 一.demo简介 1.效果展示如下图,我截了三个瞬间,但其实这是一个连续的动画,就是这个大圆不停地吞下小圆. 2.这个动画可以拆分为两部分,首先是大圆张嘴闭嘴的动画,相当于画一个圆弧,规定一下它的角度就好.小圆就是一个从右向左移动的动画.然后不停地刷新界面,让动画的持续时间为永恒,这样就会有一个持续的动态效果. 二.分析贪吃动画的尺寸比例 1.在制作动画之前,我们要先建一个模型,来确定一下大圆和

  • Python学习之随机模块random详解

    目录 random.random() random.uniform() random.randint() random.choice() random.sample() random.randrange() random 模块 - 抽奖小案例 random 模块 - 双色球小案例 该章节我们来学习一下 Python 中非常简单但也非常有用的模块 —> random ,此模块主要用于生成随机数.接下面我们就来了解一下 random 模块中最常见的几种方法. random.random() 功能:随

  • 动画详解Vue3的Composition Api

    目录 回顾Option Api Option Api的缺陷 Composition Api 众所周知,Vue3.0带来了一个全新的特性——Composition API. 字面意思就是“组合API”,它是为了实现基于函数的逻辑复用机制而产生的. 回顾Option Api 在了解Composition Api之前,首先回顾下我们使用Option Api遇到的问题,我们在Vue2中常常会需要在特定的区域(data,methods,watch,computed...)编写负责相同功能的代码. Opti

  • iOS中利用CAEmitterLayer实现粒子动画详解

    前言 你肯定见过很酷炫的iOS动画吧,例如微信的表情雨

  • 利用Swift实现各类的CATransition动画详解

    前言 最近因为工作的需要,打算用swift重构现有项目,实现过程中发现用到了很多系统的动画实现,因为之前的都是用OC实现的,这里主要是把一些动画效果来通过swift实现一下. 这篇文章主要是实现一下CATransition动画的不同效果. 第一步 创建一个swift文件并声明相应的枚举类型 enum TransitionAnimType : Int { case fade = 0, //淡入淡出 push, //推挤 reveal, //揭开 moveIn, //覆盖 cube, //立方体 s

随机推荐