如何巧用CSS3+less制作酷炫的星空动画效果

发布时间：2023-10-17 14:55:37 所属栏目：语言来源：

导读：本文介绍了css3进阶之less实现星空动画的示例代码，分享给大家，具体如下：

知识点预览

这篇文章的 less技巧 + css技巧知识点包括：

less如何写循环

less里如何使用js表达式

css3属性: box-sh

本文介绍了css3进阶之less实现星空动画的示例代码，分享给大家，具体如下：

知识点预览

这篇文章的 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: (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>

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) }

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!