提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样运用less完成随机下雪动画详解【css教程】,less,随机下雪动画

冬季来了,设想师说摇摇乐的场景须要随机着落的雪花动画,第一时候就想到的要领是canvas比较好,项目异常紧要,但是小顺序对canvas支撑不够友爱,轻易在项目中涌现没法预估的兼容性问题 ,立时又否认了这类主意,想了想用javascript来写随机动画本钱又高。既不必canvas也不必javascript来完成,终究决议应用css预处理器less来完成随机雪花,less怎样可能完成随机雪花?关于喜好写css的人来讲,这异常风趣。【引荐教程: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 文件中应用,能够经由过程反引号的体式格局应用

因而有了以下随机位移、随机时候、随机大小的代码

因而有了以下的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个差别定名的雪花标签

以上就是这篇文章的全部内容了,愿望本文的内容对人人的进修或许事情具有肯定的参考进修代价,假如有疑问人人能够留言交换。

以上就是怎样应用less完成随机下雪动画详解的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样运用less完成随机下雪动画详解【css教程】,less,随机下雪动画"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线