css3进阶之less完成夜空动漫的示例编码

日期：2021-01-20 类型：科技新闻我要分享

关键词：通道抠图，怎么在图片上编辑文字，创客贴作图神器，免费图片设计制作在线，背景透明图制作

本文详细介绍了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>

第1步：radial-gradient转化成渐变色情况

设定在html和body标识上

* {
    padding: 0;
    margin: 0;
}

html, body {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
    height: 100%;
}

实际效果以下：

以便比照1下我画的并不是纯黑色情况图，接着放1张纯黑色的图来比照1下，能够看出来上图沒有那末黑，有点偏灰

这里radial-gradient主要参数详细介绍

ellipse 说明我是用的椭圆渐变色，你看下图就了解如何用了

// 上图的主要参数是
radial-gradient(ellipse,#ffffff, #6a6a6a)

也便是色调是白色#ffffff到灰色#6a6a6a的椭圆渐变色

at bottom 这是说明椭圆渐变色的圆心在底部，请看下图实际实际效果：

// 上图的主要参数是
radial-gradient(ellipse at bottom,#ffffff, #6a6a6a)

好了，到了这1步，渐变色大家就进行了

第2步：box-shadow怎样转化成不计其数的星星

最先大家要处理3个难题，第1个是怎样用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里边的涵数，意思是界定了1个loop涵数
@counter是传入涵数的自变量
when(@counter > 0) 意思是当自变量的值@counter > 0的情况下，这个涵数才会实行
.loop((@counter - 1))这是递归启用

因此大家总结出来less完成循环系统的方法便是递归启用界定的涵数

接着处理第2个难题，便是怎样在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表述式的方式便是用~开始，随后``包裹表述式

接着处理第3个难题，便是怎样用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处有1个#9bcded色调的小点
// 由于div自身是width 10px height 10px 是1个正方形，因此它的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⑵000任意数的值（Math.round(Math.random() * 2000) + 'px'）
转化成了y轴是0⑵000任意数的值（Math.round(Math.random() * 2000) + 'px #FFF' `）
色调是#FFF

倘若大家启用mixin(100)，就转化成了在2000 * 2000的情况上 100个白色方块（星星）

第3步：融合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:⑴0s;
}
// start2转化成了长2px，宽2px的星星200个
#start2 {
    .mixin(200);
    width: 2px;
    height: 2px;
    animation: animStar 100s linear infinite;
    animation-delay:⑻s;
}
// start3转化成了长3px，宽3px的星星100个
#start3 {
    .mixin(100);
    width: 3px;
    height: 3px;
    animation	: animStar 150s linear infinite;
    animation-delay:⑸s;
}
// 动漫实际效果以下
@keyframes animStar {
    from { transform: translateY(0px) }
    to { transform: translateY(⑵000px) }
}

本文完成，能够自身去codepen试试实际效果哦，嘿嘿

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：用CSS防Lightbox完成点一下小图无更新显示信息大图返回下一篇：没有了