这是一款写实肥皂泡效果,基于纯 CSS 实现,整个页面只有两个空标签,没有图片、没有 JS。
泡泡的通透感全靠渐变叠加:一层径向渐变把中心掏空,两层方向相反的彩虹线性渐变被挤到上下边缘,再用 screen 混合模式让颜色相互穿透,模拟出皂膜的干涉色。边缘则由五层内阴影堆出来——顶部强光、底部反光、左右两侧一冷一暖的折射色,最后压一道极细的白边把"膜"的边界勾出来。高光用了四处伪元素:左上大片过曝光斑(overlay 混合)、一个小亮点、右下的地面反光,以及一道竖向的薄膜纹理。
浮动动画也没做成简单的上下平移,而是配了轻微的旋转和非等比缩放,让泡泡在飘的时候略有形变,这个细节是它比一般 CSS 泡泡耐看的原因。
代价是所有位置都是固定像素值,改尺寸得整套重算,直接用建议按现有 320px 尺寸缩放。
适用于网页装饰元素、加载动画、儿童与清洁类主题页面、CSS 渐变与混合模式的学习参考等场景。