mcpField
C
cards-containers

cards-containers

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

关于 cards-containers

将迪士尼 12 条动画原则用于界面卡片和容器的技能，涵盖交互状态、分层运动、节奏以及用于营造立体过渡的 CSS 属性。

主要功能

  1. 01定义静止、悬停、选中和展开状态
  2. 02在过渡中使用预备动作与缓动
  3. 03让内容运动稍晚于卡片
  4. 04以弧线路径制作重排动画
  5. 05用阴影和层级表现深度

适用场景

  1. 01设计卡片悬停和选中动画
  2. 02制作卡片展开至详情视图的动画
  3. 03创建拖放重排过渡

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill cards-containers

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

详细介绍

卡片与容器动画原则

将 Disney 的 12 条原则应用于卡片和容器，打造引人入胜且富有层次感的界面。

应用于卡片的原则

1. 挤压与拉伸

卡片可在开始拖动时轻微压缩，并在释放时拉伸。幅度应尽量小：缩放变化最多为 2-3%。

2. 预备动作

将卡片展开为详情视图前，先短暂缩小至 0.98，持续 50ms，然后再展开。让用户为这一变换做好准备。

3. 舞台布局

通过 z-index 和阴影，将正在交互的卡片提升到其他卡片上方。将背景卡片调暗或模糊，以突出焦点。

4. 连贯动作与关键姿势

定义清晰的状态：静止、悬停、选中、展开。通过关键姿势之间的过渡实现姿势到姿势的动画。

5. 跟随动作与重叠动作

卡片内容（文本、图片、图标）应略微滞后于卡片移动。错开 20-40ms，让动作感觉更自然。

6. 缓入与缓出

卡片抬升使用 ease-out，卡片落回使用 ease-in-out。绝不使用线性过渡。使用 cubic-bezier(0.25, 0.1, 0.25, 1) 实现平滑抬升。

7. 弧线运动

卡片重新排序（拖放）时，应沿曲线路径而非直线移动。移动时添加轻微旋转。

8. 次要动作

卡片抬升（主要动作）时，阴影随之扩展并模糊（次要动作）。内部图片可轻微缩放。边框可发光。

9. 时间
  • 悬停抬升：200-250ms
  • 选中：150ms
  • 展开为详情：300-400ms
  • 重新排序/洗牌：250-350ms
  • 卡片间的错开时间：50-75ms
10. 夸张

悬停阴影可扩展至正常深度的 2-3 倍。选中的卡片可抬升 8-12px。效果应与卡片尺寸成比例。

11. 扎实绘制

缩放时保持一致的圆角比例。阴影应始终来自同一光源。保持纵横比。

12. 魅力

圆角让人感觉亲切，微妙的阴影增添高级感。平滑的过渡能建立信任。卡片应给人真实物体的感觉。

CSS 实现

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

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

.card-content {
  transition: transform 280ms ease-out; /* slight lag */
}

关键属性

  • transform：translateY、scale、rotate
  • box-shadow：深度与抬升
  • z-index：图层顺序
  • filter：背景模糊
  • opacity：焦点状态

评论

支持 Markdown