悬停折叠

悬停折叠的CSS动画效果，纯CSS实现，无需JavaScript。

实时预览

Paper Fold ↓

Fold →

Corner Fold

代码

css

/* Top fold (book page flip) */
.fold-scene {
  perspective: 600px;
}

.fold-top {
  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.6s ease;
}

.fold-top:hover {
  transform: rotateX(-25deg);
  box-shadow: 0 20px 40px rgba(239, 71, 111, 0.4);
}

/* Side fold (door open) */
.fold-side {
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.fold-side:hover {
  transform: rotateY(15deg);
  box-shadow: -8px 8px 25px rgba(17, 138, 178, 0.4);
}

/* Corner fold (page curl) */
.fold-corner {
  transform-origin: bottom right;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.fold-corner:hover {
  transform: rotateX(8deg) rotateY(-8deg) translateZ(-5px);
}

html

<div class="fold-scene">
  <div class="fold-top">Paper Fold ↓</div>
</div>
<div class="fold-side">Fold →</div>
<div class="fold-corner">Corner Fold</div>

纯 CSS 实现的悬停折叠悬停效果——当鼠标悬停在元素上时，通过 transition 和 transform 属性触发平滑的视觉变化。不需要任何 JavaScript，拷贝代码即可集成到你的网站中。

快速使用

从下方代码块复制 CSS 到你的样式文件中
将 HTML 结构粘贴到你的页面模板
给目标元素添加对应的 class 名称
根据需要调整颜色、大小、动画时长等参数

使用场景

卡片和磁贴：悬停时上浮+阴影延伸，给用户可点击的视觉暗示
按钮和链接：悬停变色、缩放或发光，提供即时交互反馈
图片和缩略图：悬停放大或模糊聚焦，突出重点内容
导航菜单：下划线展开或背景色滑入，指示当前位置

常见问题

Q: Hover 效果在手机上不生效怎么办？ A: 手机的触摸屏没有 hover 状态。建议用 @media (hover: hover) 包裹 hover 样式，只在支持悬停的设备上应用。对于移动端，可用 :active 伪类做点击反馈。

Q: 动画会影响页面性能吗？ A: 本效果只用 transform 和 opacity 做动画，这两个属性由 GPU 合成器处理，不触发页面重排（reflow），性能开销极小，120fps 流畅运行。

Q: 如何修改动画的触发方式？ A: 将 :hover 改为 :active（点击触发）、.active（JS 控制类名触发）或配合 @media (prefers-reduced-motion) 做无障碍适配。

浏览器兼容性

本效果使用标准 CSS 属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）均完全支持。

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	⚠️ 部分属性需要 `-ms-` 前缀或降级

使用说明

属性	值	说明
`perspective`	`500px` ~ `600px`	3D 视距，值越小透视越强
`transform-origin`	`top center` / `left center`	决定折叠的轴心位置
`rotateX()`	`-25deg`	向前翻折（顶部折叠）
`rotateY()`	`15deg`	侧向翻折（门式折叠）
`cubic-bezier`	`0.23, 1, 0.32, 1`	缓出曲线，模拟纸张弹性
`box-shadow`	动态阴影	随折叠角度变化增强立体感

提示：transform-origin 是关键属性 —— 改变它可以创建不同方向的折叠效果。perspective 必须应用在父容器上才能产生真实的 3D 透视效果。可配合 ::before 伪元素添加折痕阴影。

悬停折叠 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐