前端代码：滚动发光卡片，滚动变色+彩色聚光灯

滚动发光卡片 滚动变色卡片 彩色聚光灯效果

让滚动成为主角的发光卡片廊：随水平滚动触发光晕边框、色相渐变和文本动画，已本地化 GSAP/字体/样式与中文文案，适合用作科技感展示、团队岗位或案例卡片的 Demo 首屏。

亮点卖点

• 滚动驱动光晕：支持 Scroll-Driven Animations，渐变光圈随鼠标/触控移动，动效饱满。
• GSAP 兼容兜底：浏览器不支持滚动时间轴时自动切换 GSAP + ScrollTrigger，体验一致。
• 本地化资源：normalize、字体、GSAP ESM 全部本地，无外链依赖，离线可演示。
• 中文文案 + KS 品牌：卡片信息改为中文岗位/待遇示例，顶部徽标可替换自有品牌。

设计风格

• 暗色背景 + 高饱和光晕，卡片内用细线、柔和玻璃态边框突出质感。
• 文本排版简洁，强调职位名称与薪资区间，适合科技/创意主题。
• 鼠标跟随光斑与滚动色相渐变，视觉动感强。

适用场景

• 科技/设计/招聘落地页的卡片蔷展示。
• 作品集、案例集或岗位展示的交互动效段落。
• 需要快速套用、换文案和色调的滚动动效模块。

使用方式

1. 直接打开 index.html 即可预览（支持离线）。
2. 修改卡片文案：编辑 index.html 中的 <article> 内容即可。
3. 调整配色/半径：在 style.css 的 :root 中修改 --card-size、--radius、色值等变量。
4. 若需增加卡片，只需在 ul 中添加 li > article 结构，动画自动生效。

文件结构

• index.html：页面结构、KS 徽标、卡片内容。
• style.css：布局、光晕边框、字体与颜色变量。
• script.js：滚动动画逻辑，ScrollTrigger 兼容兜底。
• assets/css/normalize.min.css：本地化 reset。
• assets/fonts/GeistVF.ttf：本地字体。
• assets/js/gsap.js、assets/js/ScrollTrigger.js：本地 GSAP ESM 与插件。

自定义提示

• 想要更多颜色变化，可在 style.css 中增加 animation 的色相范围，或在 JS 里注入不同的 --base 值。
• 若要替换字体，直接在 style.css 的 @font-face 中指向新字体，并更新 font-family。
• 需要接入真实数据时，可将卡片列表由 JS 动态生成，但保持同样的 DOM 结构以复用动效。

本地运行教程