Agent Skills
› nexu-io/motion-anything
› card-lift-hover
card-lift-hover
GitHub纯CSS实现的卡片悬停上浮特效，通过加深阴影提供点击暗示。适用于可交互网格卡片，支持无障碍模式，避免在密集布局中使用。
Trigger Scenarios
需要为卡片添加悬停点击反馈
实现无JS的CSS交互动画
Install
npx skills add nexu-io/motion-anything --skill card-lift-hover -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": null,
"design_system": {
"requires": false
},
"example_prompt": "Use card-lift-hover on the clickable cards in this grid: a small lift + deeper shadow on hover,\npure CSS, static under prefers-reduced-motion."
},
"name": "card-lift-hover",
"triggers": [
"hover lift",
"card hover effect",
"elevate on hover",
"悬停抬升",
"卡片悬浮"
],
"description": "Lift a clickable card toward the viewer on hover with a deepening shadow — a tactile, responsive\ncue. Pure CSS, no JS. Only use on actually-clickable cards (motion implies clickability). Honors\nprefers-reduced-motion (static). Avoid on very dense grids where many lifts feel noisy.\n"
}
card-lift-hover
A clickable card that lifts on hover. Pure CSS. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- Clickable cards / tiles in a grid that should feel tactile.
When NOT to use it (restraint)
- Non-interactive cards — the lift implies it is clickable.
- Very dense grids where many simultaneous lifts feel noisy.
How to apply
- Copy
card-lift-hover.cssand link it. - Add the class:
<a class="lift-card" href="…">…</a>. No JavaScript needed.
Accessibility & performance
prefers-reduced-motion: no lift (a subtle shadow change remains). Transform + shadow only.
Version History
- b016900 Current 2026-07-11 17:07
