怎么在css3中使用less实现一个星空动画
这期内容当中小编将会给大家带来有关怎么在css3中使用less实现一个星空动画,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
创新互联公司-专业网站定制、快速模板网站建设、高性价比南关网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式南关网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖南关地区。费用合理售后完善,十余年实体公司更值得信赖。
首先html文件结构很简单,如下:
第一步:radial-gradient生成渐变背景
设置在html和body标签上
* { padding: 0; margin: 0; } html, body { background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); overflow: hidden; height: 100%; }
效果如下:
为了对比一下我画的不是纯黑色背景图,接着放一张纯黑色的图来对比一下,可以看出来上图没有那么黑,有点偏灰
这里radial-gradient参数介绍
ellipse 表明我是用的椭圆渐变,你看下图就知道怎么用了
// 上图的参数是 radial-gradient(ellipse,#ffffff, #6a6a6a)
也就是颜色是白色#ffffff到灰色#6a6a6a的椭圆渐变
at bottom 这是表明椭圆渐变的圆心在底部,请看下图具体效果:
// 上图的参数是 radial-gradient(ellipse at bottom,#ffffff, #6a6a6a)
好了,到了这一步,渐变我们就完成了
第二步:box-shadow如何生成成百上千的星星
首先我们要解决3个问题,第一个是如何用less写循环,请看如下less代码 ( 详细解释在代码下面 )
2.1 less如何实现循环
举例如下:
.loop(@counter) when(@counter > 0) { .h@{counter} { padding: (10px*@counter); } .loop((@counter - 1)); //递归调用自身 } div{ .loop(5); } //编译输出 div .h6 { padding: 50px; } div .h5 { padding: 40px; } div .h4 { padding: 30px; } div .h3 { padding: 20px; } div .h2 { padding: 10px; }
.loop(@counter) when(@counter > 0) 是less里面的函数,意思是定义了一个loop函数
@counter是传入函数的变量
when(@counter > 0) 意思是当变量的值@counter > 0的时候,这个函数才会执行
.loop((@counter - 1))这是递归调用
所以我们总结出来less实现循环的办法就是递归调用定义的函数
接着解决第二个问题,就是如何在less里面写JS表达式
2.2 如何在less里面写JS表达式
.loop(@counter) when(@counter > 0) { padding: ~`@{counter} + Math.round(2.4)`; .loop(@counter - 1); //递归调用自身 } div{ .loop(2); } // 生成代码如下 div { padding: 4; padding: 3; }
所以我们总结出来在less里面使用js表达式的方法就是用~开头,然后``包裹表达式
接着解决第三个问题,就是如何用box-shadow属性生成 成百上千的星星
2.3 如何用less循环在box-shadow属性上生成 成百上千的星星
这些星星其实就是正方形的小点,我们先生成4个正方形小点
// div { width:10px; height:10px; box-shadow: 10px 0px #9bcded, 50px 0px #9bcded, 10px 40px #9bcded, 50px 40px #9bcded; }
效果如下
这里使用了box-shadow多个值来生成正方形
// 比如以下属性10px 0px #9bcded 表示,在相对于div元素x轴10px,y轴0px处有一个#9bcded颜色的小点 // 因为div本身是width 10px height 10px 是一个正方形,所以它的box-shadow也是正方形 box-shadow: 10px 0px #9bcded, width:10px; height:10px;
接着,我们要结合less循环在box-shadow上生成更多的方块(星星):
// 首先定义个mixin函数,参数是@n, 条件是只有@n > 0的时候才执行函数里的代码 .mixin(@n) when(@n > 0) { box-shadow+ : ~`Math.round(Math.random() * 2000) + 'px' + ' ' +Math.round(Math.random() * 2000) + 'px #FFF' `; .mixin((@n - 1)); }
上面函数主要是box-shadow中,主要包括3个参数
生成了x轴是0-2000随机数的值(Math.round(Math.random() * 2000) + 'px')
生成了y轴是0-2000随机数的值(Math.round(Math.random() * 2000) + 'px #FFF' `)
颜色是#FFF
假如我们调用mixin(100),就生成了在2000 * 2000的背景上 100个白色方块(星星)
第三步:结合html,生成星星
之前html结构如下
less如下:
// start1生成了长1px,宽1px的星星700个,这是小星星 // 小星星代表距离远的星星,大星星代表距离近的,这样就有了空间感 #start1 { .mixin(700); width: 1px; height: 1px; animation: animStar 50s linear infinite; animation-delay:-10s; } // start2生成了长2px,宽2px的星星200个 #start2 { .mixin(200); width: 2px; height: 2px; animation: animStar 100s linear infinite; animation-delay:-8s; } // start3生成了长3px,宽3px的星星100个 #start3 { .mixin(100); width: 3px; height: 3px; animation : animStar 150s linear infinite; animation-delay:-5s; } // 动画效果如下 @keyframes animStar { from { transform: translateY(0px) } to { transform: translateY(-2000px) } }
上述就是小编为大家分享的怎么在css3中使用less实现一个星空动画了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
新闻标题:怎么在css3中使用less实现一个星空动画
本文地址:http://azwzsj.com/article/gjjhgs.html