液体流动按钮效果是用css通过radial-gradient、@keyframes动画和transform模拟液面波动的视觉错觉；核心是将径向渐变圆心锚定于按钮底部，配合translatey与scale实现上涌晃动感，并需分层叠加高光与本体渐变、确保文字层级高于伪元素。
什么是液体流动按钮效果
液体流动按钮本质是用 CSS 动画模拟液体在容器内晃动、起伏的视觉效果，常见于登录页或 CTA 按钮。它不是靠 SVG 或 Canvas 实现真实流体物理，而是用 radial-gradient + animation + transform 组合出“液面波动”错觉。核心是让渐变色区域随时间偏移、缩放、旋转，形成动态填充感。
用 background-image + @keyframes 实现基础液态填充
最轻量、兼容性好的方案：用径向渐变作为背景，通过动画改变其位置和尺寸。关键点在于把渐变中心锚定在按钮底部，并让它向上“涌动”：
button {
position: relative;
overflow: hidden;
background: #4a5568;
color: white;
border: none;
padding: 12px 24px;
}
button::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.6) 0%, transparent 70%);
animation: wave 3s ease-in-out infinite;
z-index: -1;
}
@keyframes wave {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.1); }
100% { transform: translateY(0) scale(1); }
}
-
radial-gradient的circle at 50% 100%把圆心固定在按钮底部中央，模拟液面从下往上漫延 -
transform: translateY(-20px)让高光区域短暂上浮，制造“液体晃动”感；scale(1.1)配合放大，增强饱满度 - 动画时长建议 2.5–4s，太快像抖动，太慢失去流动性
- IE 不支持
::before在button上伪元素渲染，如需兼容 IE，改用span包裹内容并设为display: inline-block
加透明度与边缘融合让液体更“真实”
纯白色高光太生硬，真实液体有折射、边缘模糊和轻微透底。需要两层叠加：
- 底层用半透明深色渐变（如
rgba(0,120,255,0.3)）模拟液体本体 - 顶层叠加浅色高光渐变（如
rgba(255,255,255,0.4)），并用blur()模糊边缘（需配合filter，但注意性能） - 按钮文字必须用
position: relative+z-index确保压在所有伪元素之上 - 避免在
button上直接设filter: blur()，会模糊整个按钮（包括文字），应只对::before单独加滤镜
响应式下液体动画容易失真怎么办
当按钮宽度变化（比如移动端缩窄），radial-gradient 的 50% 100% 坐标仍按原始尺寸计算，导致液面中心偏移。解决方式只有两个：
- 放弃百分比定位，改用
calc(50% - 10px) calc(100% - 5px)这类相对值，但需手动调参 - 更可靠的做法：用
background-size: 200% 200%+background-position动画，把渐变当作可平铺纹理来移动，这样缩放时坐标关系不变 - 禁用
transform: scale()动画——它会拉伸伪元素，破坏液体比例，改用background-size和background-position控制“涌动”幅度
液体效果的本质是心理暗示，不是物理模拟。做得太复杂反而卡顿，优先保证 60fps 和触控反馈正常，而不是追求每一帧都像真实水波。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
