Mac Dock的邻近图标联动缩放需JavaScript实时计算鼠标位置并动态设置CSS变量，因:hover仅支持单图标离散响应，无法实现按距离衰减的连续缩放效果。
直接用 transform: scale() 配合 transition 就能实现基础放大，但真要还原 Mac Dock 的“邻近图标联动+中心最大+平滑衰减”效果，必须靠 JavaScript 实时计算鼠标位置并动态设置 CSS 变量——纯 CSS 无法感知相对坐标偏移。
为什么:hover + scale(1.2) 不够用
Mac Dock 的核心交互不是“单个图标悬停放大”，而是：鼠标在某个图标上移动时，它自己最大，左右相邻图标按距离衰减缩放（比如 1.15 → 1.1 → 1.05），更远的几乎不变。这种连续、相对、非离散的响应，:hover 伪类根本无法表达。
常见错误现象包括：
- 只写
.dock-item:hover { transform: scale(1.3); }→ 所有图标独立响应，无联动，像普通按钮 - 用
transition: all 0.3s→ 放大时连边框、文字阴影一起动，动画浑浊，还可能触发重排 - 没设
transform-origin: center center→ 图标缩放时上下跳动，尤其在flex容器里基线对齐干扰明显
必须用 JS 计算鼠标相对位置
每个 .dock-item 需要根据鼠标相对于自身左边缘的横向偏移（e.clientX - itemRect.left），算出一个归一化权重值（0～1），再映射为缩放比例。关键不是“是否悬停”，而是“悬停在哪个位置”。
实操建议：
- 给每个图标绑定
mousemove，而非hover—— 这样鼠标在 Dock 区域内滑动时，所有图标都能实时响应 - 用
getBoundingClientRect()获取每个图标的left和width，算出鼠标距左边缘的距离offsetX - 定义一个衰减函数，例如：
scale = 1 + 0.3 * Math.max(0, 1 - Math.abs(offsetX / itemWidth - 0.5) * 4)，让中心区域贡献最大缩放 - 把结果写进
style.setProperty('--scale', value)，CSS 里用transform: scale(var(--scale));读取
CSS 层需配合硬件加速与层叠控制
仅靠 JS 算出缩放值还不够，渲染层必须稳定——否则 Safari 下会毛刺，放大后会被兄弟元素遮挡。
关键配置：
-
will-change: transform加在图标上（但别加在父容器，避免创建不必要的层叠上下文） - 每个图标必须是定位元素：
position: relative，否则z-index在悬停态无效 - 禁用会创建新 stacking context 的父级属性：不要给 Dock 容器设
opacity 、filter或transform，否则子项z-index只在容器内生效 -
transition只写transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1)，不带all，不带margin—— 缩放本身不影响文档流，加 margin 会强制重排
移动端和旧浏览器的兼容底线
iOS Safari 15.4 之前版本对高频 mousemove + transform 组合有渲染卡顿；IE11 及以下根本不支持 transform 缩放。
兜底策略：
- 用
@supports (transform: scale(1))包裹 Dock 样式，老浏览器自动降级为静态图标栏 - 移动端优先监听
touchmove并节流（requestAnimationFrame），避免 touchmove 过密导致卡顿 - 不依赖
will-change做性能优化，它在低端 Android 上反而增加内存压力 - Mac Dock 的“镜像倒影”效果（
-webkit-box-reflect）只在 Safari/Chrome 有效，其他浏览器直接忽略，无需 polyfill
真正难的不是写出放大动画，而是让缩放比例随鼠标位置连续变化、所有图标响应同步、且不破坏现有布局流——这要求 JS 计算轻量、CSS 属性精准、层叠上下文干净。稍一疏忽，就变成“看起来像 Dock，点进去才发现卡顿、错位、遮挡”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
