Appearance
缩放旋转
同时缩放和旋转
实时预览
S+R
代码
css
.sr-box{width:120px;height:120px;background:linear-gradient(135deg,#43e97b,#38f9d7);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:all .5s cubic-bezier(.34,1.56,.64,1)}
.sr-box:hover{transform:scale(1.2) rotate(15deg)}纯 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- 前缀或降级 |