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

魔方编程

于 2019-09-26 20:59:54 发布

阅读量362

点赞数

文章标签：前端 web前端前端开发前端教程

本文链接：https://blog.youkuaiyun.com/wewfdf/article/details/101389992

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果动图如下：

知识点预览

这篇文章的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%);
    ove

最低0.47元/天解锁文章