Tilt Card
介绍
卡片随指针做 3D 倾斜，高光反向移动，内容层有视差。离开时弹簧回正。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Tilt Card 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add tilt-card
mcp › 使用 8pt MCP 调用 get_component("tilt-card")
代码
Tilt Card 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-tilt">
<article class="x-tilt__card">
<span class="x-tilt__glare" aria-hidden="true"></span>
<div class="x-tilt__top"><span class="x-tilt__chip" aria-hidden="true"></span><span>ORBIT CARD</span></div>
<div class="x-tilt__num">4128 ·· ·· 2048</div>
<div class="x-tilt__row"><span>A. Sample</span><span>08/29</span></div>
</article>
</div>.x-tilt{perspective:800px;display:grid;place-items:center;width:100%;height:100%}
.x-tilt__card{position:relative;overflow:hidden;width:min(270px,100%);aspect-ratio:1.586;padding:18px 20px;border-radius:16px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,color-mix(in srgb,var(--d-accent,#4D74FF) 85%,#000),#1b1240 60%,#0b0b14);box-shadow:0 30px 50px -25px rgba(0,0,0,.7);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.4,.5,1);will-change:transform}
.x-tilt__card.live{transition:transform .08s linear}
.x-tilt__glare{position:absolute;left:0;top:0;width:200%;height:200%;margin:-100% 0 0 -100%;background:radial-gradient(circle at center,rgba(255,255,255,.35),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.x-tilt__card:hover .x-tilt__glare{opacity:1}
.x-tilt__top{display:flex;justify-content:space-between;align-items:center;font:700 11px/1 var(--d-font,system-ui,sans-serif);letter-spacing:.16em;transform:translateZ(30px)}
.x-tilt__chip{width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,#f5d77a,#b8913a)}
.x-tilt__num{font:600 17px/1 ui-monospace,monospace;letter-spacing:.08em;transform:translateZ(40px)}
.x-tilt__row{display:flex;justify-content:space-between;font:500 11px/1 var(--d-font,system-ui,sans-serif);opacity:.8;transform:translateZ(20px)}const init = (root) => {
const card = root.querySelector('.x-tilt__card'), glare = card.querySelector('.x-tilt__glare');
let raf = 0, idle, t = 0;
const set = (rx, ry, gx, gy) => { card.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`; glare.style.transform = `translate(${gx}px, ${gy}px)`; };
card.addEventListener('pointermove', e => {
cancelAnimationFrame(idle); idle = 0;
const r = card.getBoundingClientRect(), px = (e.clientX - r.left) / r.width, py = (e.clientY - r.top) / r.height;
card.classList.add('live'); cancelAnimationFrame(raf);
raf = requestAnimationFrame(() => set((0.5 - py) * 18, (px - 0.5) * 22, px * r.width, py * r.height));
});
card.addEventListener('pointerleave', () => { card.classList.remove('live'); set(0, 0, 0, 0); });
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
…订阅 Builder 查看完整源码。查看价格