MOTION EFFECT
链接悬浮预览Link Preview
指针悬停在链接上时，浮出一张带缩略图与摘要的预览卡。Aceternity UI 的 Link Preview，本质是 hover card 的一种。
效果预览
@阿涛的设计笔记
独立站设计手册blog.atao.dev
适合用在哪
文章正文里的外部链接、资源列表、社区/论坛的链接展示。
容易踩的坑
- 只响应 hover，键盘聚焦链接时不出现预览，触屏也无法触发。
- 悬停即请求 OG 数据且无防抖，快速划过多个链接会发出大量请求。
- 预览卡靠近视口右边缘时不做翻转定位，会被裁掉一半。
设计提示词 · Prompt
链接悬浮预览（Link Preview）：触发元素是带点状下划线的链接文字（text-decoration-style:dotted、offset 4px、主色）。预览卡默认 opacity:0、transform:translateY(-5px) scale(.96)、transform-origin:top left，加上 0.28s cubic-bezier(.4,0,.2,1) 过渡；容器 hover 时回到 opacity:1 / transform:none。卡片宽 150-280px：上方 44-120px 的封面图（渐变或截图），下方 7-9px 内边距放站点名（10.5px 加粗）与域名（9px 浅灰）。真实实现用 JS 抓取 OG 元数据后渲染。
Link Preview: the trigger is link text with a dotted underline (text-decoration-style:dotted, offset 4px, primary color). The preview card defaults to opacity:0, transform:translateY(-5px) scale(.96), transform-origin:top left, with a 0.28s cubic-bezier(.4,0,.2,1) transition; on container hover it returns to opacity:1 / transform:none. The card is 150-280px wide: a 44-120px cover image on top (gradient or screenshot), and below it 7-9px padding holding the site name (10.5px bold) and domain (9px light gray). A real implementation fetches OG metadata with JS and then renders.
常见搭配
同一页面里经常和「链接悬浮预览」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="m-linkpv">
<span class="m-linkpv__a">@阿涛的设计笔记</span>
<div class="m-linkpv__card">
<div class="m-linkpv__img"></div>
<div class="m-linkpv__bd"><b>独立站设计手册</b><span>blog.atao.dev</span></div>
</div>
</div>
</div>