这是一款写实肥皂泡效果，基于纯 CSS 实现，整个页面只有两个空标签，没有图片、没有 JS。

泡泡的通透感全靠渐变叠加：一层径向渐变把中心掏空，两层方向相反的彩虹线性渐变被挤到上下边缘，再用 screen 混合模式让颜色相互穿透，模拟出皂膜的干涉色。边缘则由五层内阴影堆出来——顶部强光、底部反光、左右两侧一冷一暖的折射色，最后压一道极细的白边把"膜"的边界勾出来。高光用了四处伪元素：左上大片过曝光斑（overlay 混合）、一个小亮点、右下的地面反光，以及一道竖向的薄膜纹理。

浮动动画也没做成简单的上下平移，而是配了轻微的旋转和非等比缩放，让泡泡在飘的时候略有形变，这个细节是它比一般 CSS 泡泡耐看的原因。

代价是所有位置都是固定像素值，改尺寸得整套重算，直接用建议按现有 320px 尺寸缩放。

适用于网页装饰元素、加载动画、儿童与清洁类主题页面、CSS 渐变与混合模式的学习参考等场景。