hover-interactions

用途

hover-interactions 是一个用于鼠标悬停交互动画的技能，适用于创建按钮高亮、卡片抬升、链接下划线、图片缩放等任何由指针触发的动画效果。其核心思路是把迪士尼十二项动画原则应用到鼠标悬停状态上，让悬停反馈既自然又可预期。

主要能力

该技能将十二项动画原则逐一映射到悬停场景：

挤压与伸展：卡片可在悬停时轻微缩放（1.02-1.05），产生“抬升”效果。
预备动作：悬停本身就是点击的预备，悬停状态预示了交互。
舞台布景：悬停效果应突出交互元素，而不是分散注意力。
逐帧与关键帧：精确定义静止姿态与悬停姿态，并在两者间平滑过渡。
跟随与重叠：子元素在父元素之后动画，例如卡片先抬升，然后阴影扩展。
慢入慢出：悬停进入用 ease-out（快速响应）；悬停退出用 ease-in-out（优雅返回）。
弧线：下划线可以从中心向外绘制，高亮可以沿曲线路径扫过。
次要动作：组合多个细微效果，例如缩放 + 阴影 + 颜色变化一起发生。
夸张：要克制，悬停是预告而非表演，缩放最大 1.05，阴影最大 +8px。
扎实绘图：悬停状态必须让人感觉是同一元素被抬升，而不是被替换。
吸引力：悬停应引导点击，制造期待但不强迫操作。

使用方式

技能给出了时间建议与实现模式。

时间建议：

颜色变化：进入 150ms，退出 200ms，缓动 ease-out / ease-in-out
缩放/抬升：进入 200ms，退出 250ms，缓动 ease-out / ease-in-out
阴影：进入 200ms，退出 250ms，缓动 ease-out / ease-in-out
下划线绘制：进入 200ms，退出 200ms，缓动 ease-out
图片缩放：进入 300ms，退出 400ms，缓动 ease-out
图标位移：进入 150ms，退出 200ms，缓动 ease-out

总体时间要求：悬停响应 150-200ms（必须感觉灵敏）；悬停退出 200-300ms（可以略慢）；悬停进入绝不超过 300ms。

实现模式（CSS 代码示例）：

卡片抬升加阴影：

.card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Slower return */
.card:not(:hover) {
  transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

从中心绘制的下划线：

.link {
  position: relative;
}

.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 200ms ease-out, left 200ms ease-out;
}

.link:hover::after {
  width: 100%;
  left: 0;
}

图标动画模式：

.button-icon {
  transition: transform 150ms ease-out;
}

.button:hover .button-icon {
  transform: translateX(4px);
}

/* Arrow grows */
.arrow-icon {
  transition: transform 150ms ease-out;
}

.link:hover .arrow-icon {
  transform: translateX(4px) scale(1.1);
}

关键规则

触屏设备没有悬停，需确保没有悬停也能使用功能。
悬停进入必须在 200ms 以内，以保持响应感。
不要移动过多元素，以免造成误点击。
使用 @media (hover: hover) 将效果限定到指针设备。
最多组合 3 个属性，避免信息过载。

指针设备限定示例：

@media (hover: hover) {
  .card:hover { /* hover effects */ }
}

适用场景

适用于网页或界面中的按钮、卡片、链接、图片、图标等任何需要鼠标悬停反馈的交互元素。

限制

该技能针对鼠标悬停状态，触屏设备无悬停，需单独保证可用性。技能未提供除 CSS 之外的其他平台或框架实现说明，也未涉及具体浏览器兼容性或性能数据，这些信息暂未提供。

技能介绍

用途

主要能力

使用方式

关键规则

适用场景

限制