HTML网页中如何制作果冻动效按钮-html教程-PHP中文网

果冻动效本质是利用transform: scale与skewx组合配合弹性缓动函数（如cubic-bezier(0.68,-0.55,0.27,1.55)）实现的物理感弹性形变，核心在于仅用transform避免重排、精准控制transform-origin、绑定:active或js交互触发，并满足形变一致、回弹延迟、边缘清晰三要素。

html网页中如何制作果冻动效按钮

什么是果冻动效（Jelly Effect）的本质

果冻动效不是 CSS 动画库里的标准术语，而是对一类弹性形变动画的俗称：按钮点击时像果冻一样横向拉伸、回弹，常伴随轻微上下浮动。它的核心是 transform: scale() 与 transform: skewX() 的组合 + 弹性缓动函数（cubic-bezier(0.68, -0.55, 0.27, 1.55) 是最常用的一组），不是靠 GIF 或 Canvas 实现。

用纯 CSS 实现可点击的果冻按钮（无 JS）

关键在于把弹性形变绑定到 :active 伪类，并确保按钮有明确的 transform-origin 控制形变中心。常见错误是忽略 user-select: none 导致文字被误选，或未设 touch-action: manipulation 造成移动端延迟。

按钮需有固定宽高（百分比或 em 均可，但不能依赖内容撑开）
必须设置 transform-origin: center，否则 skewX 会绕左上角扭曲
动画时间控制在 0.3s 以内，过长会显得黏滞；缓动函数必须用自定义 cubic-bezier，ease-in-out 完全无效
为兼容旧版 Safari，需补全 -webkit-transform 和 -webkit-transition

.jelly-btn {
  padding: 12px 24px;
  background: #4f46e5;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.jelly-btn:active {
  transform: scale(0.95) skewX(-5deg);
}

用 JavaScript 补充真实交互反馈（避免 :active 失效）

在部分安卓 WebView 或 iOS 滚动中，:active 伪类可能不触发。此时需用 JS 监听 mousedown/touchstart 并添加临时 class。注意：不要用 click，它发生在抬起之后，动效会错位。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

监听 touchstart 和 mousedown，同时触发，避免重复绑定
动效 class 应在 mouseup 和 touchend 后立即移除，否则残留形变
加防抖逻辑：若用户快速连点，避免 class 频繁切换导致渲染卡顿
不要在动效中修改 width 或 height，只用 transform——重排（reflow）会严重拖慢动画帧率

const btn = document.querySelector('.jelly-btn');
const handlePress = () => btn.classList.add('is-pressed');
const handleRelease = () => btn.classList.remove('is-pressed');

btn.addEventListener('mousedown', handlePress);
btn.addEventListener('touchstart', handlePress);
btn.addEventListener('mouseup', handleRelease);
btn.addEventListener('touchend', handleRelease);

对应 CSS：.jelly-btn.is-pressed { transform: scale(0.95) skewX(-5deg); }