mcpField
H
hover-interactions

hover-interactions

github.com/dylantarre设计与 UI132609 次安装43 周前更新
代码仓库

关于 hover-interactions

这是一份运用迪士尼 12 条原则设计鼠标悬停动画的技能指南，面向界面设计师与开发者。内容包括时长建议和 CSS 模式，并考虑触控设备及指针设备的不同交互方式。

主要功能

  1. 01将 12 条原则用于悬停状态
  2. 02按效果提供时长建议
  3. 03卡片与图标的 CSS 模式
  4. 04限制位移以避免误点
  5. 05兼顾触控与指针设备

适用场景

  1. 01为卡片添加抬起和阴影效果
  2. 02制作按钮图标悬停动画
  3. 03为链接设计响应迅速的悬停状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill hover-interactions

安装后在 Claude Code 中输入/hover-interactions确认已加载。

详细介绍

悬停交互动画

将迪士尼的 12 条原则应用于鼠标悬停状态。

原则应用

挤压与拉伸：卡片悬停时可轻微缩放（1.02-1.05），营造“抬起”效果。

预期：悬停是点击前的预期。悬停状态可以预览交互效果。

舞台呈现：悬停效果应突出可交互元素，而不是分散注意力。

直奔主题与姿势到姿势：明确定义静止和悬停姿势，并在两者之间平滑过渡。

跟随动作与重叠动作：子元素在父元素之后开始动画。卡片先抬起，随后阴影扩展。

缓入缓出：悬停进入时使用缓出（快速响应）；悬停退出时使用缓入缓出（优雅返回）。

弧线：下划线可以从中心向两侧绘制。高亮可以沿曲线路径扫入。

次要动作：组合多种细微效果，同时实现缩放、阴影和颜色变化。

时长：

  • 悬停响应：150-200ms（必须感觉灵敏）
  • 悬停退出：200-300ms（可以稍慢一些）
  • 悬停进入时长绝不能超过 300ms

夸张：效果应轻微——悬停是预览，不是表演。最大缩放幅度为 1.05，阴影最大增加 8px。

扎实绘制：悬停状态应让人感觉是同一元素被抬起，而不是被替换。

吸引力：悬停应吸引用户点击。在不强求操作的前提下营造期待感。

时长建议

悬停效果悬停进入悬停退出缓动
颜色变化150ms200msease-out / ease-in-out
缩放/抬起200ms250msease-out / ease-in-out
阴影200ms250msease-out / ease-in-out
绘制下划线200ms200msease-out
图像缩放300ms400msease-out
图标位移150ms200msease-out

实现模式

/* Card lift with shadow */
.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;
}

/* Underline draw from center */
.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);
}

关键规则

  1. 触屏设备没有悬停状态——确保不依赖悬停也能正常使用
  2. 悬停进入时长必须小于 200ms，才能让人感觉灵敏
  3. 不要让元素移动过多，以免导致误点击
  4. 使用 @media (hover: hover) 将效果限定于指针设备
  5. 最多组合 3 个属性，避免效果过度
@media (hover: hover) {
  .card:hover { /* hover effects */ }
}

评论

支持 Markdown