先说结论：这事靠谱，而且用纯HTML和CSS就能做到，不需要任何框架、任何库，甚至不用一行JavaScript。前阵子我手头正好需要一个“注水过程”的加载动效，起初想找现成组件，翻了半天不是太花哨就是体积太沉，干脆自己用HTML加CSS手搓了一个会涨水的玻璃球。折腾完发现效果意外地好，还顺手摸清了不少关于层叠上下文、渐变叠加、动画合成层的细节。这里的ML指的是HTML里的Markup Language，也就是标记语言，可别跟AI圈常说的Machine Learning搞混了——纯前端视觉玩法，和机器学习没关系。如果你也喜欢这类纯CSS实现的质感效果，或者正需要一个能撑场面的加载动画、仪表盘水位指示、创意首页装饰，这篇应该能给你一套能直接抄作业的方案。
在往下看之前先明确一下：玻璃球涨水，本质上是一个“形状裁剪”加“液体上涌”的视觉游戏。球壁要有玻璃的通透感，水体要有缓慢上涨的动画，中间最好再配点气泡和波纹，让效果“活”起来。整个过程拆开看，每一步都是CSS基础能力，但合在一起就需要一点分层设计和动画调教的思路了。
1. 这个效果到底该由谁干活：先把结构和分工理清楚
1.1 这里的ML指的是什么：不是机器学习，是标记语言
“ML+CSS”这个说法容易让人多想，尤其这两年机器学习的ML太火了，乍一看还以为是AI生成的效果。实际上在这个标题里，ML指的是HTML这类标记语言（Markup Language）。HTML负责定义“玻璃球里有什么”，CSS负责定义“这些东西长什么样、怎么动”。两者各司其职，就像搭一个实体模型：HTML是骨架和零件，CSS是材质和运动。
搞清楚了这点，整个项目的边界就清楚了：不引入JavaScript，不依赖Canvas，也不碰WebGL，所有视觉效果都靠浏览器自带的CSS渲染能力来实现。这么做的好处是代码量小、加载快、缩放不失真，而且随便找个静态页面就能扔进去跑起来。局限性则是物理模拟就别想了，水里不会真有重力、浮力和流体力学，所有“真实感”都是视觉欺骗。
1.2 一个会涨水的玻璃球，至少需要拆成四层结构
我最初的想法很简单，一个圆形容器，里面塞个蓝色方块，往上移动不就行了？结果做出来一看，塑料感极强，完全不像玻璃。后来我把视觉拆了一下，发现一个合格的玻璃球涨水效果至少包含四层：
- 球壁层：玻璃外壳，负责体积感和通透感，说白了就是圆形背景加多层渐变和阴影。
- 水体层：蓝色半透明液体，负责“上涨”这个核心动作，同时要体现水的颜色和深度。
- 动态细节层：气泡、水面波纹、液体附着在球壁上的反光，这些是“活”的关键。
- 高光层：玻璃球顶部的亮斑和底部的反光，没有这层，玻璃感直接减半。
这个分层不是拍脑袋定的。玻璃之所以看起来是玻璃，靠的是三样东西：边缘的折射暗边、表面的高光反射、以及背后环境的透射。放在网页里，前两样靠渐变和阴影模拟，第三样靠半透明背景色模拟。少任何一层，效果都会立刻垮掉。
1.3 用一张元素分工表，先把HTML骨架搭出来
动手写样式之前，我建议先把HTML结构定死。结构定得好，后面调试样式会省很多事。我的做法是四个div，每一层独立，互不嵌套逻辑：
<div class="globe"> <div class="water"></div> <span class="bubble" style="left: 20%; bottom: 10%; animation-delay: 0s;"></span> <span class="bubble" style="left: 55%; bottom: 15%; animation-delay: 1.2s;"></span> <span class="bubble" style="left: 75%; bottom: 5%; animation-delay: 2.1s;"></span> <span class="bubble" style="left: 38%; bottom: 20%; animation-delay: 3s;"></span> <div class="highlight"></div> </div>.container是外层球壁，.water是水体，.bubble是气泡，.highlight是高光。之所以把气泡放在water外边，而不是塞进水体里面，是因为气泡上升时应该“浮出水面”再消失，这样视觉上更像从水里冒出来的。如果你把气泡整个嵌在water内部，水面一涨，气泡很容易被overflow裁剪得七零八落。
至于高光放在最后，是因为它要压在所有元素上面，不能被水体盖住。这些层叠顺序一旦错了，后面调样式会越调越乱。
2. 玻璃质感不是画出来的，是“叠”出来的
2.1 球壁的立体感：两层渐变加三组阴影
很多人做玻璃球，只会给一个圆形容器设置背景色，结果做出来像彩色纸片。真正的玻璃球，光看外壳就能看出球体感，关键在背景渐变和box-shadow的组合。
我的球壁样式是这样写的：
.globe { width: 300px; height: 300px; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%), linear-gradient(145deg, rgba(190, 225, 255, 0.4), rgba(130, 185, 240, 0.15) 55%, rgba(90, 140, 210, 0.3)); box-shadow: inset 0 -10px 20px rgba(40, 70, 130, 0.3), inset 0 10px 24px rgba(255, 255, 255, 0.45), 0 18px 36px rgba(70, 130, 220, 0.28); }第一层radial-gradient模拟球体受光面，位置放在左上角，模拟光源从左上打下来。高光中心透明度极高，向外围渐变成透明，形成球体鼓起的感觉。第二层linear-gradient则是整个球体的基础色调，左上偏亮、右下偏暗，产生体积感。
box-shadow这里用了三组，分别对应三个物理现象：底部内阴影模拟玻璃下缘的折射暗边，顶部内阴影模拟玻璃上部透光后的反光，外部投影模拟球体压在地面上的影子。你可以把这三组阴影理解成给玻璃球“描边”和“落影”，没有它们，球就是扁的。
2.2 液体的透明感：半透明色值加内阴影模拟折射
水体层要同时做到“像水”和“像玻璃里的水”。区别在于，普通蓝色块太实，没有通透感；纯透明又看不出水的深度。我用的方法是：水体用半透明渐变打底，再在顶部加一条内部阴影模拟水面折射光。
.water { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(180deg, rgba(125, 200, 255, 0.55), rgba(30, 110, 210, 0.75) 85%); box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.35); border-radius: 50%; clip-path: inset(88% 0 0 0); }这里比较反直觉的是border-radius: 50%，为什么给水体也设置圆角？因为水体是贴在球壁内部的，它的轮廓也应该跟随球壁弧度。如果没有这个圆角，即使有overflow:hidden，在球壁边缘处水体还是会显得“平切”而不是“内凹”，细节放大后一眼假。
clip-path后面会细讲，先记住它负责裁剪水体显示范围。水体高度写成100%，然后依靠clip-path决定“露出多少”，这个思路是让动画可预测的关键。
2.3 高光与底部反光：决定“玻璃感”的两个小细节
如果你把球壁、水体都做完了，整体还是不够玻璃，大概率是少了高光和底部反光。我用一个独立元素来做玻璃球顶部的高光：
.highlight { position: absolute; top: 8%; left: 18%; width: 36%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%); transform: rotate(-25deg); pointer-events: none; z-index: 10; }这段高光模拟的是玻璃球对光源的镜面反射，形状是椭圆，略微旋转，贴在上半部。注意z-index必须最高，否则水位涨上来会盖住它，那就不符合物理直觉了。水是透明的，高光应该始终可见。
底部反光我直接做在球壁的box-shadow里了，就是那个inset 0 -10px 20px。如果你想让效果更细腻，可以再加一个半椭圆的光斑放在底部，透明度低一些，用来模拟玻璃底部的漫反射。但这一项是可选的，基础版不太需要。
3. 水位上涨这件事：三种实现思路和我的最终选择
3.1 方案A：height百分比动画，最简单但有糙边问题
最容易想到的方案，是让水体高度从5%涨到80%，直接给height做transition或animation。代码看着很直观：
.water { bottom: 0; height: 5%; animation: fill 4s ease-in-out forwards; } @keyframes fill { to { height: 78%; } }但实际跑起来你会发现一个很尴尬的问题：水体是个不规则形状，height动画改变的是它作为盒模型的高度，但水位边界是平直的直线，不是弧线。哪怕你把水体border-radius设置为50%，动画过程中水面的上边缘也只是一个被拉伸的圆弧，并不能与球壁的弧度自然贴合。换句话说，水面线会上下平移，但看起来像一块蓝色果冻，不像液体在球里上涨。
另一个问题更隐蔽：频繁改变height会触发布局计算，小球还好，如果页面里同时跑很多个这样的动画，帧率会明显下降。
3.2 方案B：clip-path裁剪，动画顺滑且贴合球壁
clip-path的玩法刚好反过来。水体本身保持完整高度和圆角，用clip-path来指定“显示哪一部分”。比如inset(88% 0 0 0)代表从下往上裁剪，只露出底部12%的区域。动画过程中，这个inset值逐步减小，水面就“涨”上来了。
.water { clip-path: inset(88% 0 0 0); animation: fillUp 4s cubic-bezier(0.33, 1, 0.68, 1) forwards; } @keyframes fillUp { 0% { clip-path: inset(92% 0 0 0); } 100% { clip-path: inset(22% 0 0 0); } }这种做法的核心优势是：水体元素的布局和几何形状从头到尾没变过，变的只是显示区域。浏览器不需要重新计算布局，动画性能好很多。而且因为水体始终保持着球体内部的圆角轮廓，水位上涨的弧线天然贴合球壁，看起来就是水在玻璃球里慢慢涌上来。
3.3 方案C：transform位移，性能最好但水位边界不好控制
第三种方案是把水体高度固定为100%，通过transform: translateY()让它在球里上下移动。性能确实好，因为transform只触发合成层，不触发布局。问题在于，水体是完整的圆形，你平移之后，超出球壁的部分要靠外层overflow:hidden裁掉。可一旦overflow裁剪生效，水体的顶部不再是一个平滑的水面弧线，而是被球壁切断的平边。
如果想要弧线水面，还得额外叠加一个跟容器同样大小的圆形遮罩，把水体顶部“修”成弧形。这个方案能做，但结构会复杂不少，维护起来也费劲。我试过一版，最后因为代码解释成本太高放弃了。
3.4 我为什么最终选了clip-path
对比下来，clip-path方案在“视觉自然度”和“实现复杂度”之间平衡最好。它不需要修改布局，动画过程中浏览器开销低，同时还天然解决了水面与球壁贴合的弧度问题。
有一点要提醒你：clip-path的inset写法中，四个值分别指距上、距右、距下、距左的距离。很多人会记反，写成了上右下左按顺时针，实际上inset是上右下左，和margin的写法一致。我就是在这里栽过一次，动画一开始水面直接消失，排查了半天才发现是顺序问题。
另外，clip-path对浏览器的兼容性现在已经很好了，常规现代浏览器都能跑。但如果你需要兼容一些老旧内核环境，建议加一行@supports做降级处理，让不支持clip-path的浏览器至少显示一个静态的满水状态，url里搜不到也没关系，样式默认值兜底即可。
4. 让水面“活”起来：波纹、气泡和注水节奏
4.1 水面弧形波纹：一个伪元素加旋转就够
光有上涨的水面还不够，水面太平整的话，看起来像蓝色塑料。真正的水面会有微微的波动。我用的办法特别“土”：给水体加一个伪元素，做成扁扁的椭圆，让它左右摇晃。
.water::before { content: ''; position: absolute; top: -8px; left: -30%; width: 160%; height: 18px; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%); border-radius: 50%; animation: wave 3.2s ease-in-out infinite alternate; } @keyframes wave { from { transform: translateX(-6px) rotate(-1.5deg); } to { transform: translateX(6px) rotate(1.5deg); } }这里有两个关键点。第一，伪元素宽度一定要大于水体宽度，我用的是160%，这样左右移动时不会露出边缘空白。第二，动画要用alternate往复，而不是循环一圈，水波是来回荡的，不是原地转圈。弧度不要太大，1到2度就够，真实水面不会剧烈起伏。
4.2 气泡的生成与上升节奏
气泡这个环节，很多人一上来就想用JS生成一堆随机节点。其实纯CSS也能做到，而且效果不差。关键是利用animation-delay制造错峰，让气泡不要齐刷刷地上升。
每个气泡我单独用一个span，配置随机的left、bottom和延迟时间：
.bubble { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0)); animation: rise 3.4s ease-in infinite; opacity: 0; pointer-events: none; } @keyframes rise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 0.8; } 100% { transform: translateY(-180px) scale(1.2); opacity: 0; } }气泡初始透明度是0，动画开始后先闪现再慢慢加速上升，接近顶部时放大并淡出，模拟气泡浮出水面破裂的感觉。上升距离我写的是-180px，你要根据球体实际尺寸调整，让气泡正好在接近水面最高点时消失。
气泡数量控制在5个以内就好，多了会分散注意力，而且每个气泡都是独立动画节点，数量上去了对性能不友好。
4.3 注水节奏的“呼吸感”：贝塞尔曲线的选择
最后我调整的是动画节奏。默认的ease-in-out虽然平滑，但缺少一种“注水时压力由快到慢”的呼吸感。我最终用的是cubic-bezier(0.33, 1, 0.68, 1)，这个曲线的特点是先慢后快再收尾放缓，模拟液体涌上后逐渐稳定下来的过程。
同理，气泡的动画也应该和水位上涨有个先后关系：水位刚开始涨时气泡密集一点，水位平稳后气泡稀疏一点。我用animation-delay做了错峰，气泡出现时间分别卡在0秒、1.2秒、2.1秒、3秒，正好分布在整个注水过程的四个阶段。
这一点是纯视觉经验，没有标准答案。多试几组贝塞尔值，找到你自己觉得“舒服”的节奏就行。我记得我调试的时候，把曲线从默认ease改到cubic-bezier(0.65, 0, 0.35, 1)，整体感觉立刻不一样了，那种“水在加压注入”的张力就出来了。
5. 一套可以直接跑的完整Demo和参数调节指南
5.1 完整代码：HTML加CSS，复制即用
下面这套代码是我调试完成的版本，球体直径300px，注水时长4秒，带波纹和气泡。你把它保存成HTML文件，浏览器打开就能看到效果。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纯CSS玻璃球涨水效果</title> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(160deg, #1b2a3a, #243b4a); font-family: system-ui, sans-serif; } .globe { width: 300px; height: 300px; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 42%), linear-gradient(145deg, rgba(190, 225, 255, 0.35), rgba(130, 185, 240, 0.15) 55%, rgba(90, 140, 210, 0.3)); box-shadow: inset 0 -10px 20px rgba(40, 70, 130, 0.3), inset 0 10px 24px rgba(255, 255, 255, 0.4), 0 18px 36px rgba(70, 130, 220, 0.25); } .water { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(180deg, rgba(125, 200, 255, 0.55), rgba(30, 110, 210, 0.78) 85%); border-radius: 50%; box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.35); clip-path: inset(88% 0 0 0); animation: fillUp 4s cubic-bezier(0.33, 1, 0.68, 1) forwards; } .water::before { content: ''; position: absolute; top: -8px; left: -30%; width: 160%; height: 18px; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%); border-radius: 50%; animation: wave 3.2s ease-in-out infinite alternate; } .bubble { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0)); animation: rise 3.4s ease-in infinite; opacity: 0; pointer-events: none; } .highlight { position: absolute; top: 8%; left: 18%; width: 36%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%); transform: rotate(-25deg); pointer-events: none; z-index: 10; } @keyframes fillUp { 0% { clip-path: inset(92% 0 0 0); } 100% { clip-path: inset(22% 0 0 0); } } @keyframes wave { from { transform: translateX(-6px) rotate(-1.5deg); } to { transform: translateX(6px) rotate(1.5deg); } } @keyframes rise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 0.8; } 100% { transform: translateY(-180px) scale(1.2); opacity: 0; } } </style> </head> <body> <div class="globe"> <div class="water"></div> <span class="bubble" style="left: 20%; bottom: 10%; animation-delay: 0s;"></span> <span class="bubble" style="left: 55%; bottom: 15%; animation-delay: 1.2s;"></span> <span class="bubble" style="left: 75%; bottom: 5%; animation-delay: 2.1s;"></span> <span class="bubble" style="left: 38%; bottom: 20%; animation-delay: 3s;"></span> <div class="highlight"></div> </div> </body> </html>这个Demo跑起来之后，你会看到玻璃球里的蓝色水体从底部慢慢涨到约78%的位置，水面带细微波动，气泡依次上升，整体有一种“缓慢注水”的安静感。如果我想拿它做加载动画，只需要把面积缩小到80px左右，把fillUp时长改成2秒，再给外层包一个旋转或者呼吸动效，就能直接用了。
5.2 关键参数速查表：改颜色、速度、气泡密度分别动哪里
为了方便你二次修改，我把调试时最常碰到的参数整理成一张速查表：
| 想调整的效果 | 修改位置 | 说明 |
|---|---|---|
| 水体最终高度 | fillUp关键帧中100%状态的inset数值 | inset(22% 0 0 0)表示水面距顶部22%，水占78% |
| 注水速度 | fillUp动画的duration值 | 4s改成2s就是快速注水 |
| 注水节奏 | fillUp动画的cubic-bezier曲线 | 想更平缓可换成ease-in-out |
| 水体颜色 | water的background渐变 | 上半rgba控制浅色层，下半rgba控制深色层 |
| 水体透明度 | water背景中的alpha值 | 数值越小越透明 |
| 气泡数量 | 调整HTML中span.bubble的个数 | 建议3到6个 |
| 气泡上升速度 | rise动画的duration值 | 3.4s改小则气泡上升变快 |
| 气泡大小 | bubble的width和height | 大小要均匀，不要太大 |
| 波纹幅度 | wave关键帧中的translateX和rotate | 幅度越大水面晃动越明显 |
| 高光强度和位置 | highlight的background与top、left | 想更明显就把透明度调高 |
调节的时候建议一次只改一个参数，改完刷新看效果，不要同时动七八处，否则出了问题根本不知道是哪一步改坏了。别问我怎么知道的，我调气泡位置时顺手调了水体颜色，结果水面看起来像中毒了，排查了十分钟。
6. 我在手搓过程中踩过的三个坑
6.1 圆形容器配overflow:hidden时，气泡会被“腰斩”
第一次跑通动画后，我满心欢喜，结果发现气泡只要一超过球体上半部分，就会硬生生被截断，剩下半个圆圈卡在球壁上，特别难看。原因很简单：外层.globe设置了overflow:hidden，气泡从水面上升后，超出球壁的部分自然会被裁剪掉。
这个问题没法靠“去掉overflow:hidden”解决，因为我们确实需要它来保证水体不溢出。我的处理方式是控制气泡的上升距离，让每个气泡在接近球壁上边缘之前就完成透明度的消失。你可以把气泡的translateY(-180px)看成最大上升高度，球体直径是300px，气泡起点位置在底部10%到20%之间，折算下来180px刚好让气泡升到球体中上部就淡出了，不会触碰到顶部裁剪边界。
如果你非要气泡升到球体顶部再破裂，那就得把气泡的animation-delay配合水位上涨节奏单独精调，让气泡在接近顶部时正好处于淡出阶段，视觉上像“刚好到达水面就破了”。这个属于进阶细节，基础版不用强求。
6.2 内阴影把水体“染色”了：层叠顺序的重要性
调试球壁时，我给.globe加了一个inset底部阴影，本来是想模拟玻璃下缘的暗边。结果水体一开始上涨，我立刻发现水体底部多了一条深蓝色的弧线，像是被烧焦了一样。仔细检查才发现，水体层紧贴着球壁，球壁的inset阴影是画在容器内部上方的，会覆盖在water元素之上，等于给水体叠加了一层深色渐变。
这个问题有三个解决办法。最简单的，把水体层级抬高，给它设置z-index: 1，让水覆盖在球壁阴影之上。可这样一来，玻璃下缘的折射暗边又没了，玻璃感会减弱。我最后用的是折中方案：把水体设置为半透明背景，然后把球壁底部的inset阴影颜色调得浅一些，让阴影从水体后面透出来，既有暗边效果，又不会把水体染得太脏。
这个取舍很典型，纯CSS做质感效果时，阴影和高光经常和内容层打架。你要先想清楚哪个效果优先级更高，再决定层级顺序和透明度，而不是盲目叠加。
6.3 动画卡顿的隐形杀手：气泡数量与像素级渲染
刚开始我为了追求“丰富”，一口气放了15个气泡，还用box-shadow给每个气泡加了光晕。页面加载后动画肉眼可见的掉帧，尤其在低功耗设备上，气泡上升时跟幻灯片似的。
原因在于，每个气泡都是一个独立的合成层，页面里有15个气泡就有15个层在同时运动。再加上box-shadow的光晕渲染会增加像素填充开销，CPU和GPU都被拖累了。优化后我只保留4个气泡，去掉box-shadow改用radial-gradient模拟光晕，动画立刻流畅了。
这里给个实用建议：如果需要很多气泡的密集效果，优先用radial-gradient而不是box-shadow做光晕；气泡数量超过10个，建议考虑用CSS变量加循环生成，或者干脆把气泡合成到一张雪碧图里做整体位移，而不是让每个气泡独立运动。我们这种纯CSS方案，控制在5个气泡以内是性能和视觉的最佳平衡点。
做这个小效果最深的体会是：CSS的“质感”不是你直接画出来的，而是靠一层层微小的视觉反馈叠出来的。玻璃的透明感来自前景和背景的对比，水的上涨感来自裁剪区域的变化，气泡的灵动感来自不同元素动画节奏的错位。每一层单独看都很简单，合在一起才有一点“液体注满玻璃球”的意思。如果你也想上手试试，建议先照着完整Demo跑通一遍，然后把参数表里每一项都改一改，看看视觉会怎么变。这个过程中的试错，比任何教程都更能帮你建立对CSS渲染机制的感觉。
