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


Posted in HTML / CSS onSeptember 10, 2019

本文介绍了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%;
}

效果如下:

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

为了对比一下我画的不是纯黑色背景图,接着放一张纯黑色的图来对比一下,可以看出来上图没有那么黑,有点偏灰

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

这里radial-gradient参数介绍

ellipse 表明我是用的椭圆渐变,你看下图就知道怎么用了

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

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

也就是颜色是白色#ffffff到灰色#6a6a6a的椭圆渐变

at bottom 这是表明椭圆渐变的圆心在底部,请看下图具体效果:

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

// 上图的参数是
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;
}

效果如下

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

这里使用了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试试效果哦,嘿嘿

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

HTML / CSS 相关文章推荐
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 #HTML / CSS
移动端适配 使px自动转换rem
Aug 26 #HTML / CSS
CSS3 毛玻璃效果
Aug 14 #HTML / CSS
详解css position 5种不同的值的用法
Jul 30 #HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 #HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 #HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 #HTML / CSS
You might like
php中cookie的作用域
2008/03/27 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
js实现时钟定时器
2020/03/26 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
解决python 输出是省略号的问题
2018/04/19 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
小区门卫岗位职责
2013/12/31 职场文书
父母对孩子说的话
2014/04/12 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
房屋过户委托书范本
2014/10/07 职场文书
小学生暑假生活总结
2015/07/13 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
Go语言 详解net的tcp服务
2022/04/14 Golang
golang语言指针操作
2022/04/14 Golang