零基础学会用HTML编辑网页制作精美的果冻效果按钮-html教程-PHP中文网

果冻效果按钮必须用css的transform、@keyframes和will-change实现，html本身不支持动画；常见失效原因包括overflow: hidden缺失、transform-origin未设center、父容器含perspective、未声明will-change导致safari卡顿或不触发硬件加速。

零基础学会用html编辑网页制作精美的果冻效果按钮

果冻效果按钮不是靠纯 HTML 实现的，HTML 本身不支持动画或形变；必须用 CSS 的 transform、transition 和关键帧 @keyframes 配合实现，且现代写法强烈依赖 will-change 和硬件加速控制。零基础直接抄代码容易卡顿、闪屏或在 Safari 上失效。

为什么 `<button></button>` 加个 class 就不动？常见失效原因

果冻效果本质是元素缩放 + 倾斜 + 恢复的循环动画，但浏览器默认对 button 元素做了一些限制：

overflow: hidden 缺失会导致动画过程中内容溢出、边缘撕裂
没设 transform-origin: center，缩放会偏移，看起来像“弹歪了”
父容器有 perspective 或 transform 时，子元素动画坐标系混乱，果冻抖动或消失
没加 will-change: transform，Chrome/Edge 可能掉帧，Safari 直接不触发硬件加速

最简可用的果冻按钮 CSS 写法（兼容 Chrome/Firefox/Safari）

以下代码去掉所有多余修饰，只保留触发果冻的核心规则，可直接粘贴到 <style></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 必须分开——混在一个选择器里会被覆盖，果冻就只剩“咔哒”一下缩放。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

移动端点击无反馈？iOS Safari 的两个硬约束

iOS Safari 对 :hover 支持极弱，且默认禁用非 cursor: pointer 元素的悬停效果。果冻按钮在 iPhone 上点一下才动，或完全不动，基本是以下问题：

没给 .jelly-btn 加 cursor: pointer，iOS 不识别为可交互元素
没加 -webkit-tap-highlight-color: transparent，点击后灰色遮罩盖住动画
没监听 touchstart 并手动加 .active 类，纯 CSS 在触屏设备上无法稳定触发

临时补救：在 <script></script> 里加一行 document.addEventListener('touchstart', function() {}, true) 可激活 iOS hover，但更稳的方式是用 JS 切换 active 类并配 .jelly-btn.active 样式。

果冻效果看着轻盈，实际对渲染管线很敏感——transform 层级错乱、z-index 覆盖、甚至父元素用了 filter 都会让动画卡在 30fps 以下。调效果时先关掉所有其他动画，单独测这个按钮，不然你永远不知道是代码问题还是页面干扰。