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

本文完结,可以自己去codepen试试效果哦,嘿嘿

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

css3进阶之less实现星空动画的示例代码