H5 中怎么用径向渐变做出类似深海气泡上升的聚光背景-H5教程-PHP中文网

深海气泡上升聚光背景需CSS径向渐变打底+Canvas动画协同：CSS用偏心低透明软边渐变模拟斜射水下光束，叠加微纹理增强纵深；Canvas为每个气泡用createRadialGradient绘制三层光影，并配合上升、飘移、缩放及透明度变化动效；整体克制留白，气泡≤25个，最大直径≤视口高8%，渐变透明度≤0.2。

h5 中怎么用径向渐变做出类似深海气泡上升的聚光背景

用径向渐变模拟深海气泡上升的聚光背景，关键不是“让气泡发光”，而是用渐变营造出水下幽暗环境中，一束柔光从画面中心斜上方洒落、照亮浮升气泡群的氛围感。这需要 CSS 背景叠加 + Canvas 动画协同实现，纯 CSS 做不出动态气泡，纯 Canvas 又难复刻细腻光影层次。

用 CSS 径向渐变打底，模拟水下光束

在页面最外层容器（如或全屏

）上设置一个偏心、低透明度、软边缘的黑色径向渐变，作为“水下环境光”：
用 radial-gradient(circle at 30% 20%, rgba(10,20,40,0.15), transparent 75%) —— 圆心偏左上，模拟光源来自水面斜角
主色选深蓝灰（如 rgba(8,16,32,0.18)），比纯黑更显水感；透明过渡区拉长到 70%–80%，避免生硬晕染
务必配合一张极低对比度的深海纹理图（如微粒噪点或模糊水波），用 background-image: url(...), radial-gradient(...) 叠加，增强纵深感

Canvas 绘制气泡，用 createRadialGradient 做高光质感
每个气泡本身不是纯色圆，而是一个带立体高光的小球体。用 Canvas 的 createRadialGradient 为每个气泡单独绘制光影：

起始圆设为 (x0, y0, 0)，位置略偏左上（如 x0 = bubble.x - 3, y0 = bubble.y - 3），模拟点光源反射
结束圆设为 (bubble.x, bubble.y, bubble.r)，圆心与气泡一致，半径等于气泡半径，保证渐变贴合形状
配色分三层：addColorStop(0, 'rgba(255,255,255,0.8)')（高光）、addColorStop(0.6, 'rgba(180,220,255,0.4)')（主体蓝白）、addColorStop(1, 'rgba(100,150,200,0)')（透明收边）

动效配合：气泡上升 + 光束微晃
真实深海中，光束并非静止。可轻微扰动渐变圆心位置，增强沉浸感：

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										

在 requestAnimationFrame 循环中，用正弦函数缓慢偏移 CSS 渐变的 at 位置，例如：at ${30 + Math.sin(time * 0.001) * 2}% ${20 + Math.cos(time * 0.0008) * 1.5}%

气泡上升时，给其添加轻微水平飘移和随机缩放（0.8–1.2 倍），并让小气泡上升快、大气泡慢，模拟浮力差异
所有气泡的透明度随高度增加而略微提升（越接近“水面”越亮），强化纵深节奏

细节不靠堆，靠克制留白
深海感的核心是“少”：气泡数量控制在 15–25 个以内，避免密集；最大气泡直径不超过视口高度的 8%；背景渐变透明度始终 ≤0.2；不加任何描边、阴影或文字干扰。留出大面积幽暗空间，才能让那几缕光和几个泡真正被看见。