当页面需要一张自然感很强的背景图时很多人的第一反应是去素材站找高清图片。但图片方案会带来体积、版权、风格统一和后续修改成本的问题。如果只是一张氛围感背景纯 CSS 的渐变完全可以胜任。这篇文章就用 CSS 线性渐变和径向渐变配合少量伪元素和动画从零实现一张“泄湖日落 Lagoon Sunset”风格的视觉场景。整篇文章以静态背景、动态日落、常见排错、工程规范为主线适合刚接触 CSS 渐变的新手也适合想在业务项目中快速落地视觉页面的开发者。先看最终想实现的画面天空从深蓝紫色过渡到粉紫色再向地平线的暖橙色渐变太阳悬在天空与湖面的交接处一半沉入水面湖面下半部分是深青色到深蓝色的渐变顶部有太阳的暖色倒影云朵用柔和的半透明白色模糊块来表示整体像一张刚处理过色调的照片。整个方案不需要图片资源不需要框架直接写 HTML 和 CSS 就能出效果。1. 项目背景为什么用 CSS 画一个日落场景把视觉元素用代码画出来听起来有点“炫技”但在实际项目里其实很常见。登录页、欢迎页、营销活动落地页、甚至是后台系统的空状态页面都需要一个不打扰内容、又能传递氛围的背景。图片作为背景的主要问题在于文件体积大移动端加载成本高不同分辨率需要裁剪和适配后期想更换配色时需要回到设计软件重新导出。CSS 渐变方案则完全不同。它的体积通常只有几个 KB颜色可以随时通过变量替换不需要额外请求资源而且天然具有矢量特性在任何分辨率下都清晰。更关键的是CSS 可以分层叠加天空、云朵、太阳、水面、倒影都是独立图层我们既可以让它们保持静态也可以单独给某一层添加动画最终实现一个极轻量的动态场景。这个“泄湖日落”项目就是典型例子。画面里有 5 个核心图层天空层、云层、太阳层、水面层、倒影层。只要把每一层的绘制方式想清楚再用 z-index 控制它们的层叠顺序整个页面的结构和代码就会非常清晰。1.1 适合放进哪些业务场景这一类纯 CSS 的氛围背景并不只是玩具项目。它可以直接用于官网全屏首屏背景替代大图 Banner。登录页背景在表单区域叠加半透明遮罩。内容型产品的空状态页面缓解“页面空白”带来的冰冷感。品牌专题页面的主题背景通过 CSS 变量快速切换不同情绪配色。个人主页或作品集置顶区域让页面有一个低成本动态视觉焦点。比起视频背景和 WebGL 粒子背景CSS 渐变动画在项目里引入成本最低也不会带来明显的性能负担。如果产品只是想要一个“会呼吸”的页面氛围CSS 是性价比最高的选择。1.2 实现需要掌握的 CSS 基础完成这个项目不需要 JavaScript但需要先掌握四个核心知识点linear-gradient线性渐变用于天空和水面的纵向颜色过渡。radial-gradient径向渐变用于绘制太阳及其周围的自然光晕。position绝对定位与z-index层叠用于把不同的场景图层叠放到正确位置。keyframesCSS 动画用于实现太阳下落、云朵漂移、水面波光流动。这些知识点看似基础但组合起来足以绘制非常复杂的图形。下面先把底层原理拆开讲清楚再进行完整代码实现。2. 核心概念CSS 渐变与图层叠加我们在写页面的时候往往把背景理解成一张“图”。实际上CSS 背景可以由多个渐变层叠加而成每一层都可以拥有不同的渐变方向、尺寸和位置。理解这一点是理解整个项目的关键。2.1 linear-gradient 线性渐变线性渐变是沿一条直线方向进行颜色过渡的渐变。语法格式如下background: linear-gradient( [方向或角度], 颜色 位置, 颜色 位置, ... );其中“方向”可以写作to bottom、to top right这类关键词也可以写作具体的角度值例如180deg。如果省略方向默认就是to bottom也就是从上到下过渡。这个默认值与天空、水面的视觉逻辑天然一致。下面是一个最基本的线性渐变示例.sky-demo { height: 300px; background: linear-gradient( to bottom, #2b1b4d 0%, #c96f9f 40%, #ffd6a0 100% ); }这段代码会让背景从顶部的深紫色逐渐过渡到中部的粉色最后到达底部的浅橙色。我们会发现渐变不只是两个颜色点之间平滑过渡还可以通过多个颜色节点控制过渡节奏这正好用来模拟日落时天空从冷色到暖色再到更暖色的变化。在实际使用中要注意颜色节点的位置并不一定要从 0% 到 100%可以把颜色集中在中间区域。例如#c96f9f 30%表示从 30% 位置开始出现这个颜色前面的区域仍然是上一个颜色的渐变范围。这种方式比均匀分布更能体现日落时“颜色集中在低空”的感觉。2.2 radial-gradient 径向渐变径向渐变从圆心向外扩散常用于绘制圆形光晕。语法如下background: radial-gradient( [形状和位置], 颜色 位置, 颜色 位置, ... );太阳的核心可以看成一个亮白色圆向外逐渐过渡到半透明的橙色光晕.sun-demo { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient( circle, #fff7d6 0%, #ffcf9a 35%, rgba(255, 170, 120, 0.9) 60%, transparent 100% ); }关键点在于最后一层transparent 100%它让太阳不是生硬的圆形色块而是向外自然消融的光源。这比单纯使用box-shadow模拟光晕更柔和也更容易控制边缘的衰减。2.3 多层背景叠加CSS 的background属性允许同时声明多个背景层不同的层用逗号分隔。先写的层会覆盖在后写的层上方。比如我们可以在一个元素上同时绘制天空渐层和远处的光线.sky-demo { background: radial-gradient( circle at 50% 100%, rgba(255, 200, 140, 0.5), transparent 45% ), linear-gradient(to bottom, #2b1b4d 0%, #ffd6a0 100%); }这里第一层是地平线附近的暖色光晕第二层是基础天空渐变。这种多层背景的能力非常强大很多看似复杂的视觉其实都是多个渐变层叠加的结果。2.4 图层顺序与定位在今天的项目里除了单个元素的多层背景还需要把“天空”“太阳”“水面”当成独立元素进行层叠。CSS 的层叠顺序由z-index决定而z-index只对设置了定位属性例如position: absolute的元素生效。我们的绘制顺序从底层到顶层应该是天空 → 云朵 → 太阳 → 水面 → 水中倒影 → 文字。水面需要遮住太阳的下半部分所以水面的z-index必须大于太阳倒影要显示在水面上所以倒影的z-index又要大于水面。理解了这一层秩序后面写代码就不容易乱。3. 环境准备与项目结构因为这是纯前端 CSS 项目不需要安装 Node.js、Webpack 等工具链只需要一个现代浏览器和一个文本编辑器。推荐使用 Chrome 或 Edge 最新稳定版进行预览Firefox 和 Safari 对 CSS 渐变的支持也已经非常成熟。这里不要求固定某个版本只要浏览器不是多年前的旧版本都能正常显示。项目目录结构如下lagoon-sunset/ ├── index.html └── css/ └── style.css其中index.html是页面结构文件css/style.css负责所有视觉效果。如果你希望快速测试也可以把 CSS 直接写进 HTML 的style标签但作为工程实践仍然推荐拆分文件便于后续维护。4. 静态版泄湖日落页面实现先从静态版本开始。静态版能够完整呈现画面构图也方便我们确认图层顺序和配色是否正确。动画只是在静态基础上增加状态变化所以静态版是排错的基础。4.1 编写 HTML 结构先创建index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title泄湖日落 Lagoon Sunset/title link relstylesheet hrefcss/style.css / /head body div classlagoon div classsky/div div classclouds span classcloud cloud-1/span span classcloud cloud-2/span /div div classsun/div div classwater/div div classreflection/div p classtitleLagoon Sunset/p /div /body /html页面的容器是一个类名为lagoon的全屏大盒子。内部按照“天空、云层、太阳、水面、倒影、文字”的顺序书写。这里特意把云层放在天空后面、太阳前面使得云朵能显示在天空之上又不会遮挡太阳的核心。文字放在最后确保它永远显示在最上层。4.2 实现天空渐变天空是从顶部深蓝紫到地平线暖橙色的竖向渐变。黄昏时天空越靠近地平线越亮颜色越偏橙红色如果直接从顶部紫色过渡到底部橙色会显得缺少层次。因此我在中间加入粉色过渡节点。/* css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } .lagoon { position: relative; width: 100%; height: 100vh; overflow: hidden; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .sky { position: absolute; left: 0; top: 0; width: 100%; height: 55%; background: linear-gradient( to bottom, #2b1b4d 0%, #5b3a8c 18%, #c96f9f 38%, #f7a072 58%, #ffd6a0 78%, #ffe8c2 100% ); z-index: 1; }其中55%的高度表示天空约占画面上半部分剩余 45% 留给湖面。颜色节点的百分比含义是在这个高度位置出现该颜色并且相邻颜色之间平滑过渡。多节点渐变比两段渐变更接近真实黄昏的光线分布。4.3 实现湖面渐变水面与天空不同。水面整体更冷但朝霞的暖色光会映在水面上方形成一个“上暖下冷”的渐变。.water { position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; background: linear-gradient( to bottom, #ffb88c 0%, #dd7f9f 20%, #4a5d8f 50%, #1d2b56 100% ); z-index: 10; }从颜色排列可以看到湖面顶部是暖橙色大约到 20% 位置变成粉紫色随后迅速过渡到冷蓝色。这个设计对应的是天空暖光在湖水中的反射如果整个水面都使用冷色视觉上会缺失“日落映在湖面”的氛围。4.4 实现太阳与光晕太阳使用一个圆形元素背景采用径向渐变中间亮白向外逐渐变成橙色并最终透明。这个渐变让太阳看起来像一个发光体而不是一个生硬的圆。.sun { position: absolute; left: 50%; top: 55%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient( circle, #fff7d6 0%, #ffcf9a 30%, rgba(255, 170, 120, 0.9) 55%, transparent 100% ); transform: translate(-50%, -50%); z-index: 3; }太阳的top: 55%正好等于天空层的高度也就是说太阳圆心落在天空与水面的交界线上。它在视觉上会被水面挡住下半部分形成一个“太阳正在落向湖面”的效果。4.5 制作水中倒影太阳在水中会形成一个柔软的光斑倒影它不是完整的圆形而是被水面波纹打破的竖向渐变光带。这里用一个独立的reflection元素绘制。.reflection { position: absolute; left: 50%; top: 55%; width: 220px; height: 120px; border-radius: 50%; background: linear-gradient( to bottom, rgba(255, 213, 160, 0.85) 0%, rgba(255, 170, 120, 0.35) 50%, transparent 100% ); transform: translateX(-50%); filter: blur(14px); z-index: 11; }这里有几个设计细节。第一倒影宽度大于太阳反映光线在水面上散射范围更大。第二倒影使用竖向渐变让下方光照逐渐衰减。第三filter: blur(14px)用来模拟湖面模糊的反射效果。由于.reflection的z-index大于.water它能正常显示在水面上方。4.6 补充云朵与文字云层并不是真正的云朵图片而是半透明白色椭圆加模糊滤镜。为了让云朵有层次使用两个不同大小和位置的云.clouds { position: absolute; left: 0; top: 0; width: 100%; height: 55%; z-index: 2; } .cloud { position: absolute; display: block; background: rgba(255, 255, 255, 0.35); border-radius: 999px; filter: blur(10px); } .cloud-1 { left: 8%; top: 14%; width: 180px; height: 42px; } .cloud-2 { right: 10%; top: 28%; width: 220px; height: 50px; opacity: 0.7; }文字的定位相对简单只需要让它水平居中并保证在最上层.title { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.92); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.3em; text-shadow: 0 2px 18px rgba(100, 50, 80, 0.35); z-index: 20; }letter-spacing: 0.3em会给文字增加明显的字间距使标题更有设计感。text-shadow则是为了防止白色文字在亮色天空区域看不清。4.7 静态版完整样式把上面所有 CSS 片段整合进css/style.css完整代码如下。此版本没有动画适合先确认构图* { margin: 0; padding: 0; box-sizing: border-box; } .lagoon { position: relative; width: 100%; height: 100vh; overflow: hidden; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .sky { position: absolute; left: 0; top: 0; width: 100%; height: 55%; background: linear-gradient( to bottom, #2b1b4d 0%, #5b3a8c 18%, #c96f9f 38%, #f7a072 58%, #ffd6a0 78%, #ffe8c2 100% ); z-index: 1; } .water { position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; background: linear-gradient( to bottom, #ffb88c 0%, #dd7f9f 20%, #4a5d8f 50%, #1d2b56 100% ); z-index: 10; } .sun { position: absolute; left: 50%; top: 55%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient( circle, #fff7d6 0%, #ffcf9a 30%, rgba(255, 170, 120, 0.9) 55%, transparent 100% ); transform: translate(-50%, -50%); z-index: 3; } .reflection { position: absolute; left: 50%; top: 55%; width: 220px; height: 120px; border-radius: 50%; background: linear-gradient( to bottom, rgba(255, 213, 160, 0.85) 0%, rgba(255, 170, 120, 0.35) 50%, transparent 100% ); transform: translateX(-50%); filter: blur(14px); z-index: 11; } .clouds { position: absolute; left: 0; top: 0; width: 100%; height: 55%; z-index: 2; } .cloud { position: absolute; display: block; background: rgba(255, 255, 255, 0.35); border-radius: 999px; filter: blur(10px); } .cloud-1 { left: 8%; top: 14%; width: 180px; height: 42px; } .cloud-2 { right: 10%; top: 28%; width: 220px; height: 50px; opacity: 0.7; } .title { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.92); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.3em; text-shadow: 0 2px 18px rgba(100, 50, 80, 0.35); z-index: 20; }在浏览器中打开index.html如果一切正常页面会呈现一个全屏的黄昏湖景太阳恰好露出一半水面有暖色倒影。5. 从静态到动画添加日落动态效果静态画面已经具备基础的氛围感接下来给它添加动态效果。为了让动效不破坏页面性能我会把动画主要集中在transform和opacity属性上避免频繁触发浏览器布局和重绘。5.1 动画拆分思路动效拆分成三部分太阳缓慢下落从天空中上部移动到地平线。云朵向一侧缓慢漂移。水面上的波光不断流动。每个动画使用keyframes定义再在对应的元素上通过animation引用。需要注意太阳下落动画应该使用alternate或infinite让动画在演示时可以循环播放这样页面一直保持“日落过程”的视觉节奏。5.2 太阳下落动画如果直接使用top做动画示例代码最简单但性能并不是最优。为了兼顾教学和工程实践我给出两种写法。第一种写法直接改变top.sun { animation: sunset 12s ease-in-out infinite alternate; } keyframes sunset { from { top: 25%; opacity: 1; } to { top: 55%; opacity: 0.92; } }第二种写法使用transform代替top。这种方式更接近生产环境推荐方案.sun { top: 55%; transform: translate(-50%, -50%) translateY(-55vh); animation: sunset-transform 12s ease-in-out infinite alternate; } keyframes sunset-transform { from { transform: translate(-50%, -50%) translateY(-55vh); opacity: 1; } to { transform: translate(-50%, -50%) translateY(0); opacity: 0.92; } }这里的逻辑是先把太阳定位在地平线的标准位置top: 55%然后通过translateY(-55vh)将它移到地平线上方 55vh 处动画结束时translateY(0)太阳回到地平线。整个动画只操作transform不会引起页面布局变化因此更流畅。5.3 云朵漂移动画云朵的动画比较简单让云从初始位置缓慢向右平移再回到初始位置。由于两朵云的移动速度不同视觉上会更加自然.cloud-1 { animation: drift 26s ease-in-out infinite alternate; } .cloud-2 { animation: drift 34s ease-in-out infinite alternate reverse; } keyframes drift { from { transform: translateX(0); } to { transform: translateX(45px); } }给第二朵云加上reverse反向播放会让两朵云的相对位置变化更多避免画面过于机械。5.4 水面波光动画水面的波光其实是一个半透明斜向条纹层。利用repeating-linear-gradient生成规则条纹再用动画让背景位置不断移动就能模拟出波光流动的感觉。.water { overflow: hidden; } .water::after { content: ; position: absolute; left: 0; top: 0; width: 200%; height: 100%; background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 2px, transparent 2px, transparent 14px ); animation: water-shimmer 10s linear infinite; } keyframes water-shimmer { from { transform: translateX(0); } to { transform: translateX(-50%); } }这里的width: 200%很关键。条纹层宽度是水面宽度的两倍动画移动一半宽度后回到视觉起点反复循环时不会出现“跳变”。条纹颜色透明度很低只有 0.04不会抢占主体视觉但又能让水面产生微光纹理。5.5 动画版完整 CSS在静态版本基础上把动画相关代码合并进去完整css/style.css如下* { margin: 0; padding: 0; box-sizing: border-box; } .lagoon { position: relative; width: 100%; height: 100vh; overflow: hidden; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .sky { position: absolute; left: 0; top: 0; width: 100%; height: 55%; background: linear-gradient( to bottom, #2b1b4d 0%, #5b3a8c 18%, #c96f9f 38%, #f7a072 58%, #ffd6a0 78%, #ffe8c2 100% ); z-index: 1; } .water { position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; overflow: hidden; background: linear-gradient( to bottom, #ffb88c 0%, #dd7f9f 20%, #4a5d8f 50%, #1d2b56 100% ); z-index: 10; } .water::after { content: ; position: absolute; left: 0; top: 0; width: 200%; height: 100%; background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 2px, transparent 2px, transparent 14px ); animation: water-shimmer 10s linear infinite; } .sun { position: absolute; left: 50%; top: 55%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient( circle, #fff7d6 0%, #ffcf9a 30%, rgba(255, 170, 120, 0.9) 55%, transparent 100% ); transform: translate(-50%, -50%) translateY(-55vh); animation: sunset-transform 14s ease-in-out infinite alternate; z-index: 3; } .reflection { position: absolute; left: 50%; top: 55%; width: 220px; height: 120px; border-radius: 50%; background: linear-gradient( to bottom, rgba(255, 213, 160, 0.85) 0%, rgba(255, 170, 120, 0.35) 50%, transparent 100% ); transform: translateX(-50%); filter: blur(14px); z-index: 11; } .clouds { position: absolute; left: 0; top: 0; width: 100%; height: 55%; z-index: 2; } .cloud { position: absolute; display: block; background: rgba(255, 255, 255, 0.35); border-radius: 999px; filter: blur(10px); } .cloud-1 { left: 8%; top: 14%; width: 180px; height: 42px; animation: drift 26s ease-in-out infinite alternate; } .cloud-2 { right: 10%; top: 28%; width: 220px; height: 50px; opacity: 0.7; animation: drift 34s ease-in-out infinite alternate reverse; } .title { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.92); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.3em; text-shadow: 0 2px 18px rgba(100, 50, 80, 0.35); z-index: 20; } keyframes sunset-transform { from { transform: translate(-50%, -50%) translateY(-55vh); opacity: 1; } to { transform: translate(-50%, -50%) translateY(0); opacity: 0.92; } } keyframes drift { from { transform: translateX(0); } to { transform: translateX(45px); } } keyframes water-shimmer { from { transform: translateX(0); } to { transform: translateX(-50%); } }刷新页面后太阳会从空中缓缓落到地平线云朵缓慢移动水面也有持续的微光条纹。整个动画只使用了transform和opacity在绝大多数设备上都能保持流畅。6. 常见问题与排查思路在实际复现或者二次开发时可能会遇到一些视觉问题。下面整理成一张排查表方便快速定位。问题现象常见原因解决思路渐变出现明显色带颜色节点间距过大渐变色阶断层增加中间颜色节点或让过渡范围覆盖更大区域太阳下落动画卡顿使用top做动画导致频繁布局改用transform: translateY做位移太阳位置不在水面交界处天空层高度与太阳top不一致确认天空层高度为 55%太阳top也是 55%倒影显示不出来z-index低于水面层检查倒影的z-index必须大于.water云朵模糊成一大片filter: blur数值过大或云层宽度过大降低blur数值或缩小云朵尺寸条纹波光移动有跳变条纹层宽度不足 200%将条纹层宽度改为 200%并让动画位移 -50%低端手机上动画不流畅多个大区域使用filter或top动画减少滤镜动画尽量只操作transform和opacity页面在 Safari 中文字显示模糊大号文字配合text-shadow出现渲染差异减少阴影扩散范围或调整字体颜色对比度如果页面完全没有渐变最常见的原因是浏览器不识别某些较新的 CSS 语法。建议先检查浏览器版本再确认是否误写了background属性。可以把渐变值临时简化成两种颜色逐步排查。7. 最佳实践与工程建议当一个视觉页面要进入真实项目时不能只是“能显示”就结束。下面的建议能帮助你把这段代码变得更规范、更易维护。7.1 用 CSS 变量统一配色现在天空、水面、太阳的色值散落在多个地方将来想调整整个画面的风格会很麻烦。更合理的做法是把所有颜色提取到:root变量中:root { --sky-top: #2b1b4d; --sky-mid: #c96f9f; --sky-bottom: #ffd6a0; --water-top: #ffb88c; --water-bottom: #1d2b56; --sun-core: #fff7d6; --sun-glow: rgba(255, 170, 120, 0.9); --cloud: rgba(255, 255, 255, 0.35); }然后使用var(--sky-top)等变量替换固定值。这样如果产品临时要求从“黄昏落日”换成“清晨天空”只需要修改变量不需要逐行替换色值。7.2 提升动画性能在做动画时尽量遵守以下的性能原则优先使用transform、opacity做动画。避免对top、left、width、height做持续动画。大型模糊滤镜比如filter: blur尽量避免在低端设备上长时间运行。如果动画元素数量较多可以考虑给动画元素添加will-change: transform但要小心不要滥用否则会占用过多内存。在页面不可见时浏览器一般会暂停 CSS 动画所以不需要额外处理。7.3 响应式适配目前太阳尺寸是固定的 140px云朵尺寸也是固定像素。对全屏背景来说移动端和桌面端的比例差异很大。建议使用相对单位调整元素尺寸.sun { width: clamp(90px, 14vw, 160px); height: clamp(90px, 14vw, 160px); }云朵宽度可以继续使用百分比或者 vw 单位。标题字体已经使用了clamp()这是非常通用的响应式字号写法建议在其他文本上保持一致。7.4 无障碍与动效偏好很多用户会开启系统的“减弱动态效果”功能。在这个场景下强制播放大量动画会影响阅读体验。可以在 CSS 中通过prefers-reduced-motion关闭动画media (prefers-reduced-motion: reduce) { .sun, .cloud, .water::after { animation: none !important; } }这样尊重了用户的系统设置也是无障碍体验的一部分。另外标题文字与背景的对比度也需要检查如果背景亮度过高可以考虑给文字增加半透明深色底膜。7.5 页面进入业务的接入方式如果要把这个背景接入登录页或官网首屏不建议直接在页面上铺满所有内容。可以在lagoon容器内再增加一个内容容器并通过半透明圆角卡片承载表单和文案。例如在 HTML 中加入div classlagoon !-- 背景图层部分保持不变 -- div classcontent h2欢迎回来/h2 p输入账号开始你的旅程/p /div /div为内容容器设置position: absolute和较高的z-index再增加背景遮罩层保证可读性。背景层的所有动效不影响内容区域两者职责分离。8. 总结与扩展方向到这里“泄湖日落 Lagoon Sunset”的页面已经从静态构图到动态日落完整实现了一遍。整个过程用到的核心技术并没有超出 CSS 的范围线性渐变负责天空与湖面的纵向过渡径向渐变负责太阳光晕伪元素和渐变条纹负责水面波光动画则控制在transform与opacity范围内以保证性能。后续扩展可以从两个方向展开。第一个方向是色彩主题化把这套配色提取成主题变量让同一个组件支持“日落”“午夜”“海盐”多套皮肤适用于品牌换肤场景。第二个方向是图形增强尝试用 CSSclip-path加入远山剪影或者用 Canvas 绘制更细腻的水波粒子。无论选择哪个方向底层对渐变、图层、动画的理解都是通用的。如果这篇文章对你实现类似的全屏背景有帮助可以收藏备用也欢迎在实际项目中调整配色和节奏做成属于你自己的版本。
纯CSS画日落场景：线性渐变、径向渐变与动画实战
当页面需要一张自然感很强的背景图时很多人的第一反应是去素材站找高清图片。但图片方案会带来体积、版权、风格统一和后续修改成本的问题。如果只是一张氛围感背景纯 CSS 的渐变完全可以胜任。这篇文章就用 CSS 线性渐变和径向渐变配合少量伪元素和动画从零实现一张“泄湖日落 Lagoon Sunset”风格的视觉场景。整篇文章以静态背景、动态日落、常见排错、工程规范为主线适合刚接触 CSS 渐变的新手也适合想在业务项目中快速落地视觉页面的开发者。先看最终想实现的画面天空从深蓝紫色过渡到粉紫色再向地平线的暖橙色渐变太阳悬在天空与湖面的交接处一半沉入水面湖面下半部分是深青色到深蓝色的渐变顶部有太阳的暖色倒影云朵用柔和的半透明白色模糊块来表示整体像一张刚处理过色调的照片。整个方案不需要图片资源不需要框架直接写 HTML 和 CSS 就能出效果。1. 项目背景为什么用 CSS 画一个日落场景把视觉元素用代码画出来听起来有点“炫技”但在实际项目里其实很常见。登录页、欢迎页、营销活动落地页、甚至是后台系统的空状态页面都需要一个不打扰内容、又能传递氛围的背景。图片作为背景的主要问题在于文件体积大移动端加载成本高不同分辨率需要裁剪和适配后期想更换配色时需要回到设计软件重新导出。CSS 渐变方案则完全不同。它的体积通常只有几个 KB颜色可以随时通过变量替换不需要额外请求资源而且天然具有矢量特性在任何分辨率下都清晰。更关键的是CSS 可以分层叠加天空、云朵、太阳、水面、倒影都是独立图层我们既可以让它们保持静态也可以单独给某一层添加动画最终实现一个极轻量的动态场景。这个“泄湖日落”项目就是典型例子。画面里有 5 个核心图层天空层、云层、太阳层、水面层、倒影层。只要把每一层的绘制方式想清楚再用 z-index 控制它们的层叠顺序整个页面的结构和代码就会非常清晰。1.1 适合放进哪些业务场景这一类纯 CSS 的氛围背景并不只是玩具项目。它可以直接用于官网全屏首屏背景替代大图 Banner。登录页背景在表单区域叠加半透明遮罩。内容型产品的空状态页面缓解“页面空白”带来的冰冷感。品牌专题页面的主题背景通过 CSS 变量快速切换不同情绪配色。个人主页或作品集置顶区域让页面有一个低成本动态视觉焦点。比起视频背景和 WebGL 粒子背景CSS 渐变动画在项目里引入成本最低也不会带来明显的性能负担。如果产品只是想要一个“会呼吸”的页面氛围CSS 是性价比最高的选择。1.2 实现需要掌握的 CSS 基础完成这个项目不需要 JavaScript但需要先掌握四个核心知识点linear-gradient线性渐变用于天空和水面的纵向颜色过渡。radial-gradient径向渐变用于绘制太阳及其周围的自然光晕。position绝对定位与z-index层叠用于把不同的场景图层叠放到正确位置。keyframesCSS 动画用于实现太阳下落、云朵漂移、水面波光流动。这些知识点看似基础但组合起来足以绘制非常复杂的图形。下面先把底层原理拆开讲清楚再进行完整代码实现。2. 核心概念CSS 渐变与图层叠加我们在写页面的时候往往把背景理解成一张“图”。实际上CSS 背景可以由多个渐变层叠加而成每一层都可以拥有不同的渐变方向、尺寸和位置。理解这一点是理解整个项目的关键。2.1 linear-gradient 线性渐变线性渐变是沿一条直线方向进行颜色过渡的渐变。语法格式如下background: linear-gradient( [方向或角度], 颜色 位置, 颜色 位置, ... );其中“方向”可以写作to bottom、to top right这类关键词也可以写作具体的角度值例如180deg。如果省略方向默认就是to bottom也就是从上到下过渡。这个默认值与天空、水面的视觉逻辑天然一致。下面是一个最基本的线性渐变示例.sky-demo { height: 300px; background: linear-gradient( to bottom, #2b1b4d 0%, #c96f9f 40%, #ffd6a0 100% ); }这段代码会让背景从顶部的深紫色逐渐过渡到中部的粉色最后到达底部的浅橙色。我们会发现渐变不只是两个颜色点之间平滑过渡还可以通过多个颜色节点控制过渡节奏这正好用来模拟日落时天空从冷色到暖色再到更暖色的变化。在实际使用中要注意颜色节点的位置并不一定要从 0% 到 100%可以把颜色集中在中间区域。例如#c96f9f 30%表示从 30% 位置开始出现这个颜色前面的区域仍然是上一个颜色的渐变范围。这种方式比均匀分布更能体现日落时“颜色集中在低空”的感觉。2.2 radial-gradient 径向渐变径向渐变从圆心向外扩散常用于绘制圆形光晕。语法如下background: radial-gradient( [形状和位置], 颜色 位置, 颜色 位置, ... );太阳的核心可以看成一个亮白色圆向外逐渐过渡到半透明的橙色光晕.sun-demo { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient( circle, #fff7d6 0%, #ffcf9a 35%, rgba(255, 170, 120, 0.9) 60%, transparent 100% ); }关键点在于最后一层transparent 100%它让太阳不是生硬的圆形色块而是向外自然消融的光源。这比单纯使用box-shadow模拟光晕更柔和也更容易控制边缘的衰减。2.3 多层背景叠加CSS 的background属性允许同时声明多个背景层不同的层用逗号分隔。先写的层会覆盖在后写的层上方。比如我们可以在一个元素上同时绘制天空渐层和远处的光线.sky-demo { background: radial-gradient( circle at 50% 100%, rgba(255, 200, 140, 0.5), transparent 45% ), linear-gradient(to bottom, #2b1b4d 0%, #ffd6a0 100%); }这里第一层是地平线附近的暖色光晕第二层是基础天空渐变。这种多层背景的能力非常强大很多看似复杂的视觉其实都是多个渐变层叠加的结果。2.4 图层顺序与定位在今天的项目里除了单个元素的多层背景还需要把“天空”“太阳”“水面”当成独立元素进行层叠。CSS 的层叠顺序由z-index决定而z-index只对设置了定位属性例如position: absolute的元素生效。我们的绘制顺序从底层到顶层应该是天空 → 云朵 → 太阳 → 水面 → 水中倒影 → 文字。水面需要遮住太阳的下半部分所以水面的z-index必须大于太阳倒影要显示在水面上所以倒影的z-index又要大于水面。理解了这一层秩序后面写代码就不容易乱。3. 环境准备与项目结构因为这是纯前端 CSS 项目不需要安装 Node.js、Webpack 等工具链只需要一个现代浏览器和一个文本编辑器。推荐使用 Chrome 或 Edge 最新稳定版进行预览Firefox 和 Safari 对 CSS 渐变的支持也已经非常成熟。这里不要求固定某个版本只要浏览器不是多年前的旧版本都能正常显示。项目目录结构如下lagoon-sunset/ ├── index.html └── css/ └── style.css其中index.html是页面结构文件css/style.css负责所有视觉效果。如果你希望快速测试也可以把 CSS 直接写进 HTML 的style标签但作为工程实践仍然推荐拆分文件便于后续维护。4. 静态版泄湖日落页面实现先从静态版本开始。静态版能够完整呈现画面构图也方便我们确认图层顺序和配色是否正确。动画只是在静态基础上增加状态变化所以静态版是排错的基础。4.1 编写 HTML 结构先创建index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title泄湖日落 Lagoon Sunset/title link relstylesheet hrefcss/style.css / /head body div classlagoon div classsky/div div classclouds span classcloud cloud-1/span span classcloud cloud-2/span /div div classsun/div div classwater/div div classreflection/div p classtitleLagoon Sunset/p /div /body /html页面的容器是一个类名为lagoon的全屏大盒子。内部按照“天空、云层、太阳、水面、倒影、文字”的顺序书写。这里特意把云层放在天空后面、太阳前面使得云朵能显示在天空之上又不会遮挡太阳的核心。文字放在最后确保它永远显示在最上层。4.2 实现天空渐变天空是从顶部深蓝紫到地平线暖橙色的竖向渐变。黄昏时天空越靠近地平线越亮颜色越偏橙红色如果直接从顶部紫色过渡到底部橙色会显得缺少层次。因此我在中间加入粉色过渡节点。/* css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } .lagoon { position: relative; width: 100%; height: 100vh; overflow: hidden; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .sky { position: absolute; left: 0; top: 0; width: 100%; height: 55%; background: linear-gradient( to bottom, #2b1b4d 0%, #5b3a8c 18%, #c96f9f 38%, #f7a072 58%, #ffd6a0 78%, #ffe8c2 100% ); z-index: 1; }其中55%的高度表示天空约占画面上半部分剩余 45% 留给湖面。颜色节点的百分比含义是在这个高度位置出现该颜色并且相邻颜色之间平滑过渡。多节点渐变比两段渐变更接近真实黄昏的光线分布。4.3 实现湖面渐变水面与天空不同。水面整体更冷但朝霞的暖色光会映在水面上方形成一个“上暖下冷”的渐变。.water { position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; background: linear-gradient( to bottom, #ffb88c 0%, #dd7f9f 20%, #4a5d8f 50%, #1d2b56 100% ); z-index: 10; }从颜色排列可以看到湖面顶部是暖橙色大约到 20% 位置变成粉紫色随后迅速过渡到冷蓝色。这个设计对应的是天空暖光在湖水中的反射如果整个水面都使用冷色视觉上会缺失“日落映在湖面”的氛围。4.4 实现太阳与光晕太阳使用一个圆形元素背景采用径向渐变中间亮白向外逐渐变成橙色并最终透明。这个渐变让太阳看起来像一个发光体而不是一个生硬的圆。.sun { position: absolute; left: 50%; top: 55%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient( circle, #fff7d6 0%, #ffcf9a 30%, rgba(255, 170, 120, 0.9) 55%, transparent 100% ); transform: translate(-50%, -50%); z-index: 3; }太阳的top: 55%正好等于天空层的高度也就是说太阳圆心落在天空与水面的交界线上。它在视觉上会被水面挡住下半部分形成一个“太阳正在落向湖面”的效果。4.5 制作水中倒影太阳在水中会形成一个柔软的光斑倒影它不是完整的圆形而是被水面波纹打破的竖向渐变光带。这里用一个独立的reflection元素绘制。.reflection { position: absolute; left: 50%; top: 55%; width: 220px; height: 120px; border-radius: 50%; background: linear-gradient( to bottom, rgba(255, 213, 160, 0.85) 0%, rgba(255, 170, 120, 0.35) 50%, transparent 100% ); transform: translateX(-50%); filter: blur(14px); z-index: 11; }这里有几个设计细节。第一倒影宽度大于太阳反映光线在水面上散射范围更大。第二倒影使用竖向渐变让下方光照逐渐衰减。第三filter: blur(14px)用来模拟湖面模糊的反射效果。由于.reflection的z-index大于.water它能正常显示在水面上方。4.6 补充云朵与文字云层并不是真正的云朵图片而是半透明白色椭圆加模糊滤镜。为了让云朵有层次使用两个不同大小和位置的云.clouds { position: absolute; left: 0; top: 0; width: 100%; height: 55%; z-index: 2; } .cloud { position: absolute; display: block; background: rgba(255, 255, 255, 0.35); border-radius: 999px; filter: blur(10px); } .cloud-1 { left: 8%; top: 14%; width: 180px; height: 42px; } .cloud-2 { right: 10%; top: 28%; width: 220px; height: 50px; opacity: 0.7; }文字的定位相对简单只需要让它水平居中并保证在最上层.title { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.92); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.3em; text-shadow: 0 2px 18px rgba(100, 50, 80, 0.35); z-index: 20; }letter-spacing: 0.3em会给文字增加明显的字间距使标题更有设计感。text-shadow则是为了防止白色文字在亮色天空区域看不清。4.7 静态版完整样式把上面所有 CSS 片段整合进css/style.css完整代码如下。此版本没有动画适合先确认构图* { margin: 0; padding: 0; box-sizing: border-box; } .lagoon { position: relative; width: 100%; height: 100vh; overflow: hidden; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .sky { position: absolute; left: 0; top: 0; width: 100%; height: 55%; background: linear-gradient( to bottom, #2b1b4d 0%, #5b3a8c 18%, #c96f9f 38%, #f7a072 58%, #ffd6a0 78%, #ffe8c2 100% ); z-index: 1; } .water { position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; background: linear-gradient( to bottom, #ffb88c 0%, #dd7f9f 20%, #4a5d8f 50%, #1d2b56 100% ); z-index: 10; } .sun { position: absolute; left: 50%; top: 55%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient( circle, #fff7d6 0%, #ffcf9a 30%, rgba(255, 170, 120, 0.9) 55%, transparent 100% ); transform: translate(-50%, -50%); z-index: 3; } .reflection { position: absolute; left: 50%; top: 55%; width: 220px; height: 120px; border-radius: 50%; background: linear-gradient( to bottom, rgba(255, 213, 160, 0.85) 0%, rgba(255, 170, 120, 0.35) 50%, transparent 100% ); transform: translateX(-50%); filter: blur(14px); z-index: 11; } .clouds { position: absolute; left: 0; top: 0; width: 100%; height: 55%; z-index: 2; } .cloud { position: absolute; display: block; background: rgba(255, 255, 255, 0.35); border-radius: 999px; filter: blur(10px); } .cloud-1 { left: 8%; top: 14%; width: 180px; height: 42px; } .cloud-2 { right: 10%; top: 28%; width: 220px; height: 50px; opacity: 0.7; } .title { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.92); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.3em; text-shadow: 0 2px 18px rgba(100, 50, 80, 0.35); z-index: 20; }在浏览器中打开index.html如果一切正常页面会呈现一个全屏的黄昏湖景太阳恰好露出一半水面有暖色倒影。5. 从静态到动画添加日落动态效果静态画面已经具备基础的氛围感接下来给它添加动态效果。为了让动效不破坏页面性能我会把动画主要集中在transform和opacity属性上避免频繁触发浏览器布局和重绘。5.1 动画拆分思路动效拆分成三部分太阳缓慢下落从天空中上部移动到地平线。云朵向一侧缓慢漂移。水面上的波光不断流动。每个动画使用keyframes定义再在对应的元素上通过animation引用。需要注意太阳下落动画应该使用alternate或infinite让动画在演示时可以循环播放这样页面一直保持“日落过程”的视觉节奏。5.2 太阳下落动画如果直接使用top做动画示例代码最简单但性能并不是最优。为了兼顾教学和工程实践我给出两种写法。第一种写法直接改变top.sun { animation: sunset 12s ease-in-out infinite alternate; } keyframes sunset { from { top: 25%; opacity: 1; } to { top: 55%; opacity: 0.92; } }第二种写法使用transform代替top。这种方式更接近生产环境推荐方案.sun { top: 55%; transform: translate(-50%, -50%) translateY(-55vh); animation: sunset-transform 12s ease-in-out infinite alternate; } keyframes sunset-transform { from { transform: translate(-50%, -50%) translateY(-55vh); opacity: 1; } to { transform: translate(-50%, -50%) translateY(0); opacity: 0.92; } }这里的逻辑是先把太阳定位在地平线的标准位置top: 55%然后通过translateY(-55vh)将它移到地平线上方 55vh 处动画结束时translateY(0)太阳回到地平线。整个动画只操作transform不会引起页面布局变化因此更流畅。5.3 云朵漂移动画云朵的动画比较简单让云从初始位置缓慢向右平移再回到初始位置。由于两朵云的移动速度不同视觉上会更加自然.cloud-1 { animation: drift 26s ease-in-out infinite alternate; } .cloud-2 { animation: drift 34s ease-in-out infinite alternate reverse; } keyframes drift { from { transform: translateX(0); } to { transform: translateX(45px); } }给第二朵云加上reverse反向播放会让两朵云的相对位置变化更多避免画面过于机械。5.4 水面波光动画水面的波光其实是一个半透明斜向条纹层。利用repeating-linear-gradient生成规则条纹再用动画让背景位置不断移动就能模拟出波光流动的感觉。.water { overflow: hidden; } .water::after { content: ; position: absolute; left: 0; top: 0; width: 200%; height: 100%; background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 2px, transparent 2px, transparent 14px ); animation: water-shimmer 10s linear infinite; } keyframes water-shimmer { from { transform: translateX(0); } to { transform: translateX(-50%); } }这里的width: 200%很关键。条纹层宽度是水面宽度的两倍动画移动一半宽度后回到视觉起点反复循环时不会出现“跳变”。条纹颜色透明度很低只有 0.04不会抢占主体视觉但又能让水面产生微光纹理。5.5 动画版完整 CSS在静态版本基础上把动画相关代码合并进去完整css/style.css如下* { margin: 0; padding: 0; box-sizing: border-box; } .lagoon { position: relative; width: 100%; height: 100vh; overflow: hidden; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .sky { position: absolute; left: 0; top: 0; width: 100%; height: 55%; background: linear-gradient( to bottom, #2b1b4d 0%, #5b3a8c 18%, #c96f9f 38%, #f7a072 58%, #ffd6a0 78%, #ffe8c2 100% ); z-index: 1; } .water { position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; overflow: hidden; background: linear-gradient( to bottom, #ffb88c 0%, #dd7f9f 20%, #4a5d8f 50%, #1d2b56 100% ); z-index: 10; } .water::after { content: ; position: absolute; left: 0; top: 0; width: 200%; height: 100%; background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 2px, transparent 2px, transparent 14px ); animation: water-shimmer 10s linear infinite; } .sun { position: absolute; left: 50%; top: 55%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient( circle, #fff7d6 0%, #ffcf9a 30%, rgba(255, 170, 120, 0.9) 55%, transparent 100% ); transform: translate(-50%, -50%) translateY(-55vh); animation: sunset-transform 14s ease-in-out infinite alternate; z-index: 3; } .reflection { position: absolute; left: 50%; top: 55%; width: 220px; height: 120px; border-radius: 50%; background: linear-gradient( to bottom, rgba(255, 213, 160, 0.85) 0%, rgba(255, 170, 120, 0.35) 50%, transparent 100% ); transform: translateX(-50%); filter: blur(14px); z-index: 11; } .clouds { position: absolute; left: 0; top: 0; width: 100%; height: 55%; z-index: 2; } .cloud { position: absolute; display: block; background: rgba(255, 255, 255, 0.35); border-radius: 999px; filter: blur(10px); } .cloud-1 { left: 8%; top: 14%; width: 180px; height: 42px; animation: drift 26s ease-in-out infinite alternate; } .cloud-2 { right: 10%; top: 28%; width: 220px; height: 50px; opacity: 0.7; animation: drift 34s ease-in-out infinite alternate reverse; } .title { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.92); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.3em; text-shadow: 0 2px 18px rgba(100, 50, 80, 0.35); z-index: 20; } keyframes sunset-transform { from { transform: translate(-50%, -50%) translateY(-55vh); opacity: 1; } to { transform: translate(-50%, -50%) translateY(0); opacity: 0.92; } } keyframes drift { from { transform: translateX(0); } to { transform: translateX(45px); } } keyframes water-shimmer { from { transform: translateX(0); } to { transform: translateX(-50%); } }刷新页面后太阳会从空中缓缓落到地平线云朵缓慢移动水面也有持续的微光条纹。整个动画只使用了transform和opacity在绝大多数设备上都能保持流畅。6. 常见问题与排查思路在实际复现或者二次开发时可能会遇到一些视觉问题。下面整理成一张排查表方便快速定位。问题现象常见原因解决思路渐变出现明显色带颜色节点间距过大渐变色阶断层增加中间颜色节点或让过渡范围覆盖更大区域太阳下落动画卡顿使用top做动画导致频繁布局改用transform: translateY做位移太阳位置不在水面交界处天空层高度与太阳top不一致确认天空层高度为 55%太阳top也是 55%倒影显示不出来z-index低于水面层检查倒影的z-index必须大于.water云朵模糊成一大片filter: blur数值过大或云层宽度过大降低blur数值或缩小云朵尺寸条纹波光移动有跳变条纹层宽度不足 200%将条纹层宽度改为 200%并让动画位移 -50%低端手机上动画不流畅多个大区域使用filter或top动画减少滤镜动画尽量只操作transform和opacity页面在 Safari 中文字显示模糊大号文字配合text-shadow出现渲染差异减少阴影扩散范围或调整字体颜色对比度如果页面完全没有渐变最常见的原因是浏览器不识别某些较新的 CSS 语法。建议先检查浏览器版本再确认是否误写了background属性。可以把渐变值临时简化成两种颜色逐步排查。7. 最佳实践与工程建议当一个视觉页面要进入真实项目时不能只是“能显示”就结束。下面的建议能帮助你把这段代码变得更规范、更易维护。7.1 用 CSS 变量统一配色现在天空、水面、太阳的色值散落在多个地方将来想调整整个画面的风格会很麻烦。更合理的做法是把所有颜色提取到:root变量中:root { --sky-top: #2b1b4d; --sky-mid: #c96f9f; --sky-bottom: #ffd6a0; --water-top: #ffb88c; --water-bottom: #1d2b56; --sun-core: #fff7d6; --sun-glow: rgba(255, 170, 120, 0.9); --cloud: rgba(255, 255, 255, 0.35); }然后使用var(--sky-top)等变量替换固定值。这样如果产品临时要求从“黄昏落日”换成“清晨天空”只需要修改变量不需要逐行替换色值。7.2 提升动画性能在做动画时尽量遵守以下的性能原则优先使用transform、opacity做动画。避免对top、left、width、height做持续动画。大型模糊滤镜比如filter: blur尽量避免在低端设备上长时间运行。如果动画元素数量较多可以考虑给动画元素添加will-change: transform但要小心不要滥用否则会占用过多内存。在页面不可见时浏览器一般会暂停 CSS 动画所以不需要额外处理。7.3 响应式适配目前太阳尺寸是固定的 140px云朵尺寸也是固定像素。对全屏背景来说移动端和桌面端的比例差异很大。建议使用相对单位调整元素尺寸.sun { width: clamp(90px, 14vw, 160px); height: clamp(90px, 14vw, 160px); }云朵宽度可以继续使用百分比或者 vw 单位。标题字体已经使用了clamp()这是非常通用的响应式字号写法建议在其他文本上保持一致。7.4 无障碍与动效偏好很多用户会开启系统的“减弱动态效果”功能。在这个场景下强制播放大量动画会影响阅读体验。可以在 CSS 中通过prefers-reduced-motion关闭动画media (prefers-reduced-motion: reduce) { .sun, .cloud, .water::after { animation: none !important; } }这样尊重了用户的系统设置也是无障碍体验的一部分。另外标题文字与背景的对比度也需要检查如果背景亮度过高可以考虑给文字增加半透明深色底膜。7.5 页面进入业务的接入方式如果要把这个背景接入登录页或官网首屏不建议直接在页面上铺满所有内容。可以在lagoon容器内再增加一个内容容器并通过半透明圆角卡片承载表单和文案。例如在 HTML 中加入div classlagoon !-- 背景图层部分保持不变 -- div classcontent h2欢迎回来/h2 p输入账号开始你的旅程/p /div /div为内容容器设置position: absolute和较高的z-index再增加背景遮罩层保证可读性。背景层的所有动效不影响内容区域两者职责分离。8. 总结与扩展方向到这里“泄湖日落 Lagoon Sunset”的页面已经从静态构图到动态日落完整实现了一遍。整个过程用到的核心技术并没有超出 CSS 的范围线性渐变负责天空与湖面的纵向过渡径向渐变负责太阳光晕伪元素和渐变条纹负责水面波光动画则控制在transform与opacity范围内以保证性能。后续扩展可以从两个方向展开。第一个方向是色彩主题化把这套配色提取成主题变量让同一个组件支持“日落”“午夜”“海盐”多套皮肤适用于品牌换肤场景。第二个方向是图形增强尝试用 CSSclip-path加入远山剪影或者用 Canvas 绘制更细腻的水波粒子。无论选择哪个方向底层对渐变、图层、动画的理解都是通用的。如果这篇文章对你实现类似的全屏背景有帮助可以收藏备用也欢迎在实际项目中调整配色和节奏做成属于你自己的版本。
