这是一种纯展示型的卡片组件。利用鼠标指针位置产生轻微的 3D 倾斜效果，让静态内容在视觉上更有层次感。不过，它不包含任何交互行为避免误导使用者以为可以点击。

说到痛点一，误导使用者操作

许多开发者在实现悬停动画时不注意语义。导致“卡片”看起来像按钮，屏幕阅读器会报错或让键盘操作失效。此方案通过使用和 ARIA 标识，保证只有真正可交互元素才具备可访问性。说起来，

至于痛点二。性能消耗高

pointermove 触发频率极高，如果每一次都直接写入样式会导致大量重绘。我们只记录最新坐标，并用requestAnimationFrame合并更新。确保每帧最多执行一次变换。老实说，

从痛点三来看。缺少降级策略

• 触摸设备：No hover → 保持静态边框与文字，关闭流光动画。
• “减少动态效果”偏好：No transform → 卡片保持平面消除所有动画。

再看结构拆解。视觉职责分层

#tilt-scene> .frame> .card> .card__content

• .tilt-scene: 提供perspective,决定深度感强弱。
• .frame: 实际旋转对象，承载阴影、流光边框。
• .card: 覆盖中间区域，只留彩色边缘；负责背景与排版，
• .card::after: 指针柔光特效。
• .card__content: 文本内容区，可添加标题、副标题等。

完整示例代码

主要实现这方面，指针坐标 → CSS 自定义属性 → CSS Transform

• 步骤一：  → 相对坐标
• 步骤二：  → 偏移量。以中心为原点计算角度
• 步骤三： 将角度写入 CSS 自定义属性 '--rotate-x' 与 '--rotate-y'
• 步骤四： CSS 根据属性自动完成 transform + transition；JS 不再直接拼接字符串，提高性能与可维护性。

JavaScript 主要原因示例:

// 获取 frame 元素
const frame = document.querySelector;let rect,rafId = null;// 更新旋转角度
function renderTilt {
const maxTilt = parseFloat.getPropertyValue);const offsetX = * maxTilt,offsetY = * -maxTilt;frame.style.setProperty;frame.style.setProperty;不过，}
// pointerenter / pointermove / pointerleave
// ...
// 在 pointermove 时：
if rafId = requestAnimationFrame => {
renderTilt;老实说，rafId=null;
}
)，// ... // reset on leave

为什么要使用 requestAnimationFrame 合并更新？老实说，

当指针移动时可能每秒触发数百次事件。其实，若直接写入样式，每次都会导致浏览器重新布局和绘制，从而影响帧率。通过记录最新坐标并仅在下一帧执行一次渲染，可以把多次请求压缩成一次大幅降低 CPU/GPU 使用率。是在移动端或低功耗设备上，这种调整可以显著体验更好稳定性和电池续航。

为何需要 perspective？

`perspective` 控制视角深度，用来让旋转的元素产生立体感而不是单纯的平面扭曲。较大的数值会让更平缓，更适合低饱和、柔和风格的设计；较小则会产生夸张的“飞船”效果。如果你想保留柔和氛围，一般设置在1000~1500px 范围内即可。

可调整参数汇总表格

使用说明

可访问性提示

• 保持语义如果未来需要链接到详情页，请改用 或 而不是简单的
  。
• 键盘导航为关键交互提供键盘焦点样式，如使用 outline 或自定义 focus 样式。
• 屏幕阅读器使用 aria-label 或标题标签来描述卡片内容。