安全，但必须放大 icon 元素本身而非整个 button，否则文字、边框、阴影全跟着动易溢出或遮挡；需确保图标为独立可变换容器，设 display: inline-block 或 flex 子项，配合 transform-origin: center、translateZ(0) 和统一 transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)，移动端须用 :active 补偿 hover 失效。

button:hover 里用 transform: scale() 放大图标是否安全？

安全，但必须放大 icon 元素本身，而不是整个 button——否则文字、边框、阴影全跟着动，容易溢出或遮挡。图标通常是 <svg>、<i>（如 Font Awesome）或伪元素，它们得是独立可变换的块级/行内块容器。

• 给图标加 display: inline-block 或 flex 子项，确保 transform 生效
• 避免对 svg 直接设 width/height 动画，那会触发重排；改用 transform: scale()
• 如果图标是 <i class="fa-solid fa-download"></i>，需额外设 font-size: 1em 初始值，否则缩放可能失真
• 缩放后若边缘模糊，加 transform: scale(1.2) translateZ(0) 启用硬件加速并改善亚像素渲染

SVG 图标悬停旋转 + 放大怎么写才不卡？

旋转和放大同时触发时，transform 必须合并写，不能拆成两个声明——浏览器会把多次 transform 覆盖为最后一次，导致动画中断或跳变。

• 正确写法：transform: scale(1.15) rotate(5deg)，顺序不影响最终矩阵，但建议 scale 在前
• 动画时间统一用 transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)，别写 all
• 不要在 @keyframes 里同时定义 scale 和 rotate 再套进 animation——和 :hover 混用易冲突，纯 CSS 悬停就足够
• SVG 内联时，确保 viewBox 设置合理（如 "0 0 24 24"），否则 scale() 可能拉伸变形

Font Awesome 图标放大后位置偏移怎么办？

默认 <i> 是行内元素，transform: scale() 以左上角为原点缩放，导致图标“右下漂移”，视觉错位。

Article To Html

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

下载

• 必须显式设置 transform-origin: center，且作用于图标元素本身（不是 button）
• 加 vertical-align: middle 防止基线对齐导致上下跳动
• 若按钮含文字，图标放大后可能撑高行高，建议给 button 设 line-height: 1 或用 flex 布局替代文本流
• 别依赖 font-size 动画放大图标——它强制重绘字体，比 transform 卡顿得多，且缩放比例难控

移动端点击图标没反馈？:hover 失效怎么补救？

iOS Safari 和多数安卓浏览器根本不触发 :hover，哪怕你写了 button i:hover，真机上也看不到效果——这不是 bug，是规范行为。

立即学习“前端免费学习笔记（深入）”；

• 必须搭配 :active：写 button:active i { transform: scale(1.15) rotate(3deg); } 提供即时触觉反馈
• 加 style="touch-action: manipulation" 到按钮上，禁用双击缩放，让 :active 更灵敏
• 不要只靠 :hover 显示关键状态（比如“悬停才显示删除图标”），移动端用户永远看不到
• 若需更复杂反馈（如长按、拖拽），就得用 JS 监听 touchstart/touchend 并切换 class，CSS 只负责动画

实际缩放倍数超过 scale(1.2) 就容易引发文字模糊、SVG 锯齿或父容器 overflow 裁剪，这些细节在开发时肉眼难察，但上线后在不同设备上会集中暴露。