效果动图如下:
知识点预览
这篇文章的less技巧 + css技巧知识点包括:
less如何写循环less里如何使用js表达式css3属性: box-shadow如何生成成百上千的星星css3属性: background: radial-gradient径向渐变,如何生成渐变的背景色
HTML文档结构
首先html文件结构很简单,如下:
<div><div></div><div></div><div></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%;}
效果如下:
为了对比一下我画的不是纯黑色背景图,接着