果冻效果按钮必须用CSS的transform、@keyframes和will-change实现，HTML本身不支持动画；常见失效原因包括overflow: hidden缺失、transform-origin未设center、父容器含perspective、未声明will-change导致Safari卡顿或不触发硬件加速。
果冻效果按钮不是靠纯 HTML 实现的，HTML 本身不支持动画或形变；必须用 CSS 的 transform、transition 和关键帧 @keyframes 配合实现，且现代写法强烈依赖 will-change 和硬件加速控制。零基础直接抄代码容易卡顿、闪屏或在 Safari 上失效。
为什么 <button> 加个 class 就不动？常见失效原因
果冻效果本质是元素缩放 + 倾斜 + 恢复的循环动画，但浏览器默认对 button 元素做了一些限制：
-
overflow: hidden缺失会导致动画过程中内容溢出、边缘撕裂 - 没设
transform-origin: center，缩放会偏移，看起来像“弹歪了” - 父容器有
perspective或transform时，子元素动画坐标系混乱，果冻抖动或消失 - 没加
will-change: transform，Chrome/Edge 可能掉帧，Safari 直接不触发硬件加速
最简可用的果冻按钮 CSS 写法（兼容 Chrome/Firefox/Safari）
以下代码去掉所有多余修饰，只保留触发果冻的核心规则，可直接粘贴到 <style> 中：
.jelly-btn {
position: relative;
overflow: hidden;
transform-origin: center;
will-change: transform;
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.jelly-btn:hover {
transform: scale(1.05) skewX(-2deg) skewY(-2deg);
}
.jelly-btn:hover::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.1);
animation: jelly 0.4s ease-out forwards;
}
@keyframes jelly {
0% { transform: scale(1, 1); }
25% { transform: scale(0.95, 1.08); }
50% { transform: scale(1.05, 0.92); }
75% { transform: scale(0.98, 1.03); }
100% { transform: scale(1, 1); }
}
注意：::before 动画和 :hover 的 transform 必须分开——混在一个选择器里会被覆盖，果冻就只剩“咔哒”一下缩放。
立即学习“前端免费学习笔记（深入）”；
移动端点击无反馈？iOS Safari 的两个硬约束
iOS Safari 对 :hover 支持极弱，且默认禁用非 cursor: pointer 元素的悬停效果。果冻按钮在 iPhone 上点一下才动，或完全不动，基本是以下问题：
- 没给
.jelly-btn加cursor: pointer，iOS 不识别为可交互元素 - 没加
-webkit-tap-highlight-color: transparent，点击后灰色遮罩盖住动画 - 没监听
touchstart并手动加.active类，纯 CSS 在触屏设备上无法稳定触发
临时补救：在 <script> 里加一行 document.addEventListener('touchstart', function() {}, true) 可激活 iOS hover，但更稳的方式是用 JS 切换 active 类并配 .jelly-btn.active 样式。
果冻效果看着轻盈，实际对渲染管线很敏感——transform 层级错乱、z-index 覆盖、甚至父元素用了 filter 都会让动画卡在 30fps 以下。调效果时先关掉所有其他动画，单独测这个按钮，不然你永远不知道是代码问题还是页面干扰。
