web前端入门到实战：css，less实现星空动画

原创

于 2019-09-26 20:59:54 发布 · 405 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #web前端 #前端开发 #前端教程

本文介绍了如何利用CSS3的radial-gradient和box-shadow属性，结合LESS的循环功能，生成逼真的星空背景动画。从HTML文档结构开始，逐步解析渐变背景的设置，以及如何在LESS中编写循环和JS表达式，最终实现成百上千星星的动态效果。

效果动图如下：

知识点预览

这篇文章的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>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

第一步：radial-gradient生成渐变背景

设置在html和body标签上

* {
    padding: 0;
    margin: 0;
}

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

效果如下：