效果动图如下:
知识点预览
这篇文章的 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%;
- }
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
效果如下:
为了对比一下我画的不是纯黑色背景图, 接着放一张纯黑色的图来对比一下, 可以看出来上图没有那么黑, 有点偏灰
这里 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 .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) 意思是当变量的值 @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 结构如下
- <div>
- <div id="start1"></div>
- <div id="start2"></div>
- <div id="start3"></div>
- </div>
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
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) }
- }
本文完结, 可以自己去 codepen 试试效果哦, 嘿嘿
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/1a66899beb99