Mac Dock 悬停效果需用 transform 缩放+transform-origin 锚定+相邻选择器微调右侧图标，禁用 width/height 动画，伪元素或 pointer-events 修复热区，Safari 适配用像素 origin 和动态 will-change。
hover 触发时只缩放当前图标，不影响相邻元素布局
Mac Dock 的关键视觉特征是：鼠标悬停时图标放大，但左右图标位置不动，整体 Dock 宽度不变。这不能靠单纯给 transform: scale() 加 transition 实现——因为默认情况下缩放会撑开父容器或导致兄弟元素位移。必须用 transform-origin 配合 position: absolute 或 transform: translateX() 补偿偏移。
推荐做法是让所有图标处于同一行内（display: flex），每个图标用 transform: scaleX(1) 作为基态，悬停时改为 scaleX(1.8) scaleY(1.4)，再通过 transform-origin: center bottom 锚定底部中点，避免上浮。这样缩放只影响自身绘制区域，不触发重排。
- 别用
width/height动画——会强制重排，卡顿且破坏 Dock 流式对齐 - 确保父容器设
overflow: hidden，否则放大后图标边缘可能溢出 - 如果图标用
img标签，记得加vertical-align: bottom消除基线间隙
用 + 相邻选择器联动右侧图标微调位移
纯 :hover 只能作用于当前元素，但 Mac Dock 悬停时，右侧图标会轻微右移腾出空间——这个效果需借助相邻兄弟选择器 + 实现。前提是 HTML 结构必须是严格线性排列：<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>，不能嵌套或隔标签。
例如：当第二个图标悬停时，第三个图标需执行 transform: translateX(4px)。CSS 写法是：
立即学习“前端免费学习笔记（深入）”；
.icon:nth-child(2):hover + .icon {
transform: translateX(4px);
}
- 只能向后影响，无法用
~（通用兄弟）做“左侧图标左移”，因为 Dock 左侧空间固定 - 每个
.icon:hover + .icon规则要单独写，不能合并成通配——浏览器对复合选择器的渲染优先级和性能差异明显 - 位移量建议控制在
2–6px，过大显得生硬；配合transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)更接近 macOS 原生缓动
解决 hover 状态下图标缩放导致的点击热区错位
缩放后图标的视觉中心变了，但默认点击热区仍是原始尺寸区域，容易点空。这不是 bug，而是 CSS 规范行为：transform 不改变元素的布局盒（layout box），只改变渲染盒（painting box）。
- 给图标容器加
cursor: pointer是基础，但不够——需确保父容器flex项不压缩，用flex-shrink: 0 - 更可靠的方式是把缩放逻辑移到伪元素上：
::before承载缩放动画，本体保持原始尺寸和点击区域 - 若用 SVG 图标，直接在
<svg></svg>上设pointer-events: bounding-box，可让缩放后的整个视觉区域响应点击
兼容 Safari 的 transform-origin 和 will-change 陷阱
Safari 对 transform-origin 在 flex 子元素上的解析有偏差，尤其当父容器设了 justify-content: center 时，center bottom 可能失效。同时，Safari 对 will-change: transform 的优化有时反而引发闪烁。
- 绕过方式：改用像素值定位 origin，比如
transform-origin: 50% 100%，比文字关键字更稳定 - 不要全局给所有图标加
will-change，只在悬停时动态添加：.icon:hover { will-change: transform; } - iOS Safari 15.4+ 才完整支持
cubic-bezier()缓动，旧版本会降级为ease，不必强求一致
真正难的是让缩放、位移、阴影、背景模糊全部同步且不掉帧——这些叠加效果在低端设备上极易触发合成层爆炸。建议把 Dock 宽度限制在屏幕宽度 70% 以内，图标数不超过 7 个，否则动画就只是看起来像 Dock，而不是用起来像。
