今天小编跟大家讲解下有关css3进阶之less实现星空动画的示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3进阶之less实现星空动画的示例代码 的相关资料，希望小伙伴们看了有所帮助。
本文介绍了css3进阶之less实现星空动画的示例代码 分享给大家 具体如下：
效果动图如下：
预览链接和代码在我的codepen： https://codepen.io/lio-mengxiang/pen/YzKrEde
知识点预览
这篇文章的 less技巧 + css技巧 知识点包括：
less如何写循环 less里如何使用js表达式 css3属性: box-shadow如何生成成百上千的星星 css3属性: background: radial-gradient径向渐变 如何生成渐变的背景色HTML文档结构
首先html文件结构很简单 如下：
<div> <div id="start1"></div> <div id="start2"></div> <div id="start3"></div></div>第一步：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: ([email protected]); } .loop((@counter - 1)); //递归调用自身}div{ .loop(5);}//编译输出div .h5 { padding: 50px;}div .h4 { padding: 40px;}div .h3 { padding: 30px;}div .h2 { padding: 20px;}div .h1 { padding: 10px;} .loop(@counter) when(@counter > 0) 是less里面的函数 意思是定义了一个loop函数 @counter是传入函数的变量 when(@counter > 0) [email protected] > 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函数 [email protected], [email protected] > 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结构如下
<div> <div id="start1"></div> <div id="start2"></div> <div id="start3"></div></div>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;}// [email protected] animStar { from { transform: translateY(0px) } to { transform: translateY(-2000px) }}本文完结 可以自己去codepen试试效果哦 嘿嘿
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
