提示词库PROMPT LIBRARY

请用 HTML + CSS 实现"平滑折叠（Smooth Accordion）"折叠面板动效，展开高度必须自适应内容真实高度。 【效果】深色列表式手风琴：点击标题行展开下方正文，展开高度随内容平滑生长；同时标题右侧的加号图标旋转变减号、颜色变强调色、标题提亮；再点收起，收起时高度平滑塌回 0；多项可各自独立展开。 【实现要点】每个面板是 display:grid + grid-template-rows:0fr 的容器，展开态切到 1fr，用 transition 过渡 fr 单位实现高度自适应动画；面板内层 overflow:hidden，正文与 padding 都放在内层；标题用原生 button + aria-expanded 属性选择器驱动（[aria-expanded="true"] + .acc-panel），加号图标由两根伪元素杆组成，竖杆 rotate(90deg) 合并成减号；不需要 JS 即可运行。 【参数】CSS 变量：--dur_ms:420（展开时长）、--ease:cubic-bezier(0.65,0,0.35,1)、--accent:#5e8bff、--text_color:#dfe2ee、--muted_color:rgba(223,226,238,0.5)、--divider:rgba(255,255,255,0.1)（分隔线）。 【验收】长短不同的内容展开速度曲线一致、始终贴合真实高度；收起后面板高度严格为 0 无残留；键盘 Tab + Enter 可操作；兼容 Chrome/Edge 107+；reduced-motion 下展开收起瞬时完成。

请用纯 HTML + CSS 实现"脉冲徽标（Badge Pulse）"动效。 【效果】图标按钮右上角有一枚小红点：红点本体持续做轻微的呼吸缩放，同时不断泛出一圈向外扩散、逐渐淡出的描边波纹；红点边缘与图标之间有一圈底色分离环，轮廓始终清晰；波纹扩散与呼吸同周期运行、永不停止但极克制。 【实现要点】红点为绝对定位圆点，本体 keyframes 做 scale(1↔0.86) + opacity 呼吸；内部子元素做 border 描边圆环 scale(1→2.6) + opacity(0.9→0) 的 ping 扩散；box-shadow 0 0 0 2px 背景色做分离环；两个动画均为 infinite 且只动 transform/opacity；启停用 animation-play-state 变量控制；reduced-motion 下 paused 保留静态红点。 【参数】CSS 变量：--dot_color:#ff5470（红点色）、--dot_size:10（红点直径 px）、--ring_ms:2000（波纹扩散周期）、--breath_ms:2000（呼吸周期）、--breath:running（呼吸 running/paused 开关）。 【验收】波纹每周期完整扩散淡出、不残留；红点在深浅背景上都清晰可辨；图标按钮本体无位移；动画 60fps 常驻无卡顿；reduced-motion 下波纹与呼吸停止但红点仍显示。

请用纯 HTML + CSS 实现"卡片悬浮（Card Lift）"动效。 【效果】深色信息卡片 hover 时微微上浮 8px、顺时针倾斜约 1.2° 并放大 1.5%，边框提亮；阴影从近乎无生长为三层结构（贴地暗影 + 中距弥散 + 远距彩色氛围光），卡面顶部有 1px 受光高光；卡片内的 CTA 文字同步提亮且字距轻微拉开；移开后一切平滑回落。 【实现要点】hover 态 transform 用 translateY + rotate + scale 组合；box-shadow 写成三层分工的阴影栈并用 calc(var(--shadow_strength) * Npx) 统一缩放强度，最远层用 color-mix 混入强调色；transition 同时覆盖 transform/box-shadow/border-color；卡面背景叠 linear-gradient 顶部微光；卡宽 min(220px, calc((100vw - 88px) / 2)) 随视口收窄、flex-wrap 兜底，任何视口都完整居中不溢出；阴影层 + 微倾斜是高级感关键，忌用单层大模糊。 【参数】CSS 变量：--accent:#5e8bff（氛围光色）、--surface:#14172a（卡面底色）、--lift_y:-8（抬升高度 px，负为向上）、--tilt_deg:1.2（倾斜角 deg，可为负）、--dur_ms:320、--shadow_strength:1（三层阴影统一强度倍率）。 【验收】抬升与阴影生长同步、无先浮后影的脱节感；阴影任意强度参数下层次清晰不糊屏；卡片文字在倾斜任意帧无截断；两张卡 hover 互不影响；reduced-motion 下瞬时到位。

请用 HTML + CSS（可用 @property）实现"辉光描边卡片（Glow Border Card）"动效。 【效果】一张深色卡片四周有 1px 的渐变描边，双色光沿描边匀速绕圈流动；描边之外有一层同色模糊光晕同步旋转，形成弥散辉光；卡面内容保持安静纯色，与流动描边形成动静对比。 【实现要点】外层容器 1px padding + conic-gradient(from var(--angle), ...) 做描边，内层 surface 元素盖住中部只留 1px；--angle 用 @property 注册为 <angle>（syntax:"<angle>"、initial-value:0deg、inherits:false），keyframes 里 to { --angle: 360deg } 实现插值旋转；光晕为独立兄弟层，同款 conic 背景 + filter:blur(24px) + opacity，跑同一动画；内层圆角 = 外层圆角 - 1px。 【参数】暴露 CSS 变量：--glow_a:#5e5ce6、--glow_b:#5b8cc4、--spin_ms:4200、--radius_px:16、--halo_opacity:0.5、--surface:#0e1018。 【验收】描边光带连续无缝绕圈（无跳变）；光晕与描边同步；旋转 60fps；不支持 @property 的环境优雅降级为静态渐变描边；reduced-motion 停转但保留描边。

请用 HTML + CSS（可用 @property）实现"渐变描边按钮（Gradient Border Button）"动效。 【效果】深色胶囊按钮四周有一圈三色渐变描边，颜色沿描边匀速绕圈流动；hover 时按钮内部浮现一层同色系的暗色渐变薄填充并同步流动，文字提亮；描边粗细、圆角、转速均可调。 【实现要点】按钮本体背景为 conic-gradient(from var(--angle), 三色首尾相接)，用 padding 撑出描边厚度而非 border；内部 span 以外层圆角减描边宽的同构圆角 + 深色背景盖住中心；--angle 用 @property 注册为 <angle>（syntax:"<angle>"、initial-value:0deg、inherits:false），keyframes to { --angle:360deg } 插值旋转；hover 内层背景换成引用同一 --angle 的 linear-gradient，让内部填充与描边同速流动。 【参数】CSS 变量：--border_a:#5e5ce6、--border_b:#b45ce6、--border_c:#5b8cc4（三段描边色，首尾同色保证无缝）、--text_color:#f2f3f8、--spin_ms:3600、--radius_px:999（4=近似直角，999=胶囊）、--border_w:1.5（描边宽度 px）。 【验收】描边光带连续无缝绕圈无跳变；任意圆角与描边宽度组合下转角不露底不叠边；hover 内部填充与描边同速流动；60fps；不支持 @property 时降级为静态描边；reduced-motion 停转保留静态描边。

请用纯 HTML + CSS 实现"图标切换（Icon Morph）"动效：一个可点击的方形按钮，静止时是三条横杠的汉堡图标，点击后三条杠平滑变形为向左的箭头 ‹，再点还原。 【效果】三条圆头横杆等距排列；点击按钮后：上杆逆时针转 45° 并微微下移收短、下杆顺时针转 45° 上移收短、中杆缩短左移，三者拼合成箭头尖与箭杆；再点击反向还原为汉堡；变形过程同步连贯无跳帧。 【实现要点】三条 span 横杆用 grid + gap 垂直排列；激活态选择器（如 [aria-pressed="true"]）驱动每根杆的 transform: rotate/translate 与 width 缩短；位移量用 calc 从杆长与间距变量推导，保证参数变化后形状仍正确；按钮固定尺寸避免布局抖动；transition 只作用于 transform 与 width。 【参数】CSS 变量：--bar_color:#e8eaf2、--bar_w:34（杆长 px）、--bar_h:2（杆粗 px）、--gap:9（杆间距 px）、--dur_ms:420、--radius_px:12（按钮圆角 px）。 【验收】箭头三杆端点对齐、无错位裂缝；连续快速点击变形始终连贯；改杆长/间距参数后箭头形状依然正确；键盘可操作且有焦点圈；reduced-motion 下形状直接切换。

请用纯 HTML + CSS 实现"遮罩显图（Image Reveal）"动效。 【效果】深色圆角画框内藏一张图（用纯 CSS 多层渐变绘制的示例图，禁止外链图片）；hover 或键盘聚焦时，图从左向右擦出揭示：clip-path 裁切边缘线性推进，同时图片内容从 1.25 倍缓慢缩到正常，形成幕布揭开 + 镜头沉降的双层视差；画框底部题注同步提亮；移开后遮回。 【实现要点】图层用 clip-path:inset(0 100% 0 0 round R) 起始、inset(0 0 0 0 round R) 揭示，round 分量保持裁切圆角；假图由 radial（星点/月亮）+ linear（天空）+ conic（山脊）多层渐变合成，放在 ::before/::after 上；揭示时内容层同步 scale 1.25→1.02，transition 时长比 clip-path 略长制造视差；画框用 ::before 的 padding-top 撑比例 + 1px 描边；:hover 与 :focus-visible 等效。 【参数】CSS 变量：--dur_ms:800（揭幕时长）、--delay_ms:120（启动延迟）、--scale_from:1.25（变焦起始倍率）、--radius_px:14（画框圆角 px）、--cap_color:rgba(255,255,255,0.55)（题注色）、--ease:cubic-bezier(0.65,0,0.35,1)。 【验收】揭幕全程裁切边缘平滑推进无跳帧；图内容与裁切不同速、有纵深感；画框任意帧不变形不截断题注；真实 img 替换假图后动画逻辑不变；reduced-motion 下静态完整显示图片。

请用纯 HTML + CSS 实现"输入聚焦线（Input Focus Line）"表单输入动效。 【效果】深色下划线式输入框：标签文字默认嵌在输入位置，输入框有值或聚焦时标签平滑上浮缩小到左上角；聚焦时一条彩色渐变底线从中心向两侧展开覆盖静态灰线，标签变强调色，输入光标同色；失焦后有值输入框标签保持上浮，空输入框标签落回原位、线条收回。 【实现要点】placeholder 设为单个空格，用 :placeholder-shown 判定"空且未聚焦"；标签绝对定位，上浮态 transform:translateY(-20px) scale(0.72) 且 origin:left top，由 .fld__input:not(:placeholder-shown) ~ .fld__label 与 :focus 两选择器驱动；彩色底线为绝对定位 span，scaleX(0→1) + transform-origin:center，用 :focus-within 展开；label 包裹 input 保证点击标签聚焦；caret-color 与强调色一致。 【参数】CSS 变量：--accent:#5e8bff、--text_color:#eef0f8、--muted_color:rgba(238,240,248,0.38)（标签静默色）、--line_h:2（聚焦线粗细 px）、--dur_ms:280、--bg:rgba(255,255,255,0.04)（输入框底色）。 【验收】空/有值/聚焦/失焦四态标签位置全部正确、无遮挡输入文字；底线中心展开、收合对称；点击标签也能聚焦；多个输入框互不影响；reduced-motion 下状态瞬时切换。

请用纯 HTML + CSS 实现"液态按钮（Liquid Button）"动效。 【效果】默认是深色描边胶囊按钮；鼠标悬停时，两个彩色圆形 blob 从按钮左右两端滑入、在中央合拢并像液体一样填满整个按钮，文字颜色同步切换，填满瞬间带轻微过冲回弹；移开后液体退回两端消失。 【实现要点】按钮 overflow:hidden + isolation:isolate；两个直径约 175% 按钮宽的圆形 span 作为填充层（z-index:-1，位于文字之下），静止时 scale(0.1) 藏在两端外，hover 用 transform translate+scale 过渡到位；缓动用带过冲的 cubic-bezier；只动 transform，不触发重排；按下时 blob 轻微缩小做按压反馈。 【参数】暴露 CSS 变量并给默认值：--fill_color:#5e5ce6、--fill_color_alt:#5b8cc4（两个 blob 颜色）、--text_color:#f5f6ff、--dur_ms:600、--radius_px:999（0=直角矩形，999=胶囊）、--ease:cubic-bezier(0.62,0.05,0.28,1.2)。 【验收】填充全程 60fps 无卡顿；圆角参数两端值表现正确；按钮宽度改变时液体仍然铺满；prefers-reduced-motion 下直接呈现终态；深色页面背景下按钮轮廓清晰。

请用纯 HTML + CSS 实现"霓虹开关（Neon Toggle）"动效。 【效果】一个 iOS 风格的胶囊开关：关闭态是深灰描边轨道加白色圆钮；打开后轨道整体变成霓虹色并散发多层辉光，圆钮滑到另一端带轻微回弹，旁边等宽字标签同步点亮并发出 text-shadow 辉光；选中态持续做呼吸式明暗脉冲。 【实现要点】checkbox + label 结构，input 用 opacity:0 视觉隐藏但保留焦点；轨道宽高、圆钮尺寸、行程全部用 calc 从 --track_w 推导；霓虹感用三层同色 box-shadow（近距锐利、中距弥散、远距光圈）+ inset 内透光实现，不用滤镜；圆钮位移用带过冲的 cubic-bezier；用 :checked 相邻选择器驱动全部状态。 【参数】CSS 变量：--glow_color:#3fae90（低饱和霓虹绿）、--knob_color:#f5f6ff、--track_w:62（px）、--dur_ms:220（切换时长）、--pulse:running（呼吸脉冲 running/paused）。 【验收】点击轨道或文字都能切换；键盘 Tab 聚焦有可见焦点圈；改 --track_w 后圆钮行程自动正确；辉光在深色背景上明显但不糊屏；reduced-motion 下关闭脉冲动画，切换即时。

请用 HTML + CSS + 原生 JS 实现"数字滚动（Odometer）"动效。 【效果】一串等宽数字（如 28,473），点击按钮或定时触发时每一位数字像机械滚轮一样朝同一方向连续滚动到新值，个位滚得快、相邻位错峰落定；滚动中数字列有上下微弱的明暗渐变制造滚筒深度感，落位数字高亮为强调色。 【实现要点】每位数字是 overflow:hidden 固定高度窗口 + 内部竖排 0-9 的 reel 列，JS 设置 reel 的 translateY 百分比（每格 10%）过渡滚动；目标数字比当前小时先加一整圈再滚，保证单向滚动；transitionend 后把 transform 无动画归一化回第一圈并裁掉多余克隆节点；位移按需克隆数字补足第二圈；等宽字体 + tabular-nums 防横向抖动；容器加 aria-live=polite。 【参数】CSS 变量：--num_size:44（数字字号 px，窗口尺寸由 calc 推导）、--num_color:#f2f5ff、--dur_ms:900、--accent:#5e8bff（落位高亮）、--ease:cubic-bezier(0.3,0.9,0.25,1)；JS 从 getComputedStyle 读取 --dur_ms 与 --ease。 【验收】各位数字同向滚动、落位准确无偏移；连续触发不会让数字列无限增长；改字号参数后窗口与步进自动正确；滚动 60fps 无横向抖动；reduced-motion 下直接显示终值。

请用 HTML + CSS（可用 @property）+ 原生 JS 实现"环形进度（Progress Ring）"动效。 【效果】深色圆环：灰色底轨之上，一条双色渐变进度弧从 12 点方向顺时针匀速铺满到 72%，弧的末端有一个白色光点跟随旋转，环中心等宽数字从 0 同步滚到 72；播放完可点按钮重新播放；进度弧与数字始终对齐。 【实现要点】--p 用 @property 注册为 <percentage>，主环用 conic-gradient(色A, 色B, 色A var(--p), transparent var(--p)) + radial mask 挖空成环带；弧内叠一层同 --p 的细白高亮 conic 增加立体感；端点光点由 JS rAF 按 (p/100)*360deg 旋转，easing 与 CSS 动画一致；中心数字 rAF 逐帧更新并同步 aria-valuenow；重播用"animation 置 none → reflow → 恢复"重启；底轨为独立 conic 层。 【参数】CSS 变量：--ring_a:#5e5ce6、--ring_b:#5b8cc4（进度渐变双色）、--ring_size:168（环直径 px）、--ring_w:10（环带厚度 px）、--dur_ms:1800、--track:#1c1f2e（底轨色）；JS 常量 TARGET:72（目标百分比）。 【验收】弧线角度与中心数字任一帧一致；端点光点精确落在弧末端；重播后动画完整重放；缩放直径/厚度参数后环带与光点位置不变形；60fps；reduced-motion 下直接呈现终态。

请用 HTML + CSS + 原生 JS 实现"涟漪按钮（Ripple Button）"动效。 【效果】深色描边胶囊按钮，鼠标按下时从按点坐标扩散出一圈半透明水波，边放大边淡出直至覆盖按钮后消失；连续快速点击会产生多圈交叠涟漪；按下瞬间按钮有轻微缩小的按压反馈。 【实现要点】pointerdown 事件里获取点击坐标，动态创建圆形 span 插入按钮（overflow:hidden 裁切），直径按按钮较长边 × 倍率计算并减去自身一半居中定位到按点；动画用 keyframes 只过渡 transform:scale 与 opacity，animationend 后移除节点；涟漪层 pointer-events:none 不挡交互；参数用 CSS 变量定义，JS 只读取直径倍率参与尺寸计算。 【参数】CSS 变量：--ripple_color:#5e8bff（涟漪颜色）、--text_color:#f5f6ff、--dur_ms:550（扩散时长）、--start_scale:0.15（起始缩放）、--ripple_opacity:0.35（涟漪浓度）、--size_factor:2.2（涟漪直径 = 按钮较长边 × 该倍率）。 【验收】涟漪严格从点击点扩散而非固定中心；快速连点出现多圈涟漪且互不干扰；动画结束节点被移除、无内存堆积；60fps 无重排抖动；prefers-reduced-motion 下涟漪即时消失且停止自动演示。

请用 HTML + CSS + 原生 JS 实现"分段控件（Segmented Control）"动效。 【效果】深色胶囊分段容器内有若干选项，一个彩色滑块垫在选中项下方；点击另一项时滑块平滑滑动过去（宽度自适应目标文字宽度），选中文字变深色、未选中变灰；滑块到位带轻微过冲；支持键盘 ←/→ 切换。 【实现要点】滑块为绝对定位 span 层，位置与宽度由 JS 计算 offsetLeft/offsetWidth 后写入容器 CSS 变量 --thumb_x/--thumb_w，CSS transition 挂在 left/width 上；选项用 role=tablist/tab + aria-selected 标注选中态，文字颜色随属性选择器切换；初始落位先把 transition 置 none 再恢复，避免加载动画；resize 后重定位；滑块渐变与投影用 color-mix 从强调色派生。 【参数】CSS 变量：--accent:#5e8bff（滑块色）、--thumb_text:#0d0e14（选中文字）、--muted_text:rgba(223,226,238,0.55)（未选中文字）、--dur_ms:300、--radius_px:999（6=方角，999=胶囊）、--ease:cubic-bezier(0.3,1.2,0.4,1)。 【验收】任意两项之间滑块滑动连贯、宽度贴合目标文字；键盘方向键可切换；初始加载滑块直接就位无飞入；改圆角参数内外圆角同步；reduced-motion 下瞬时切换。

请用纯 HTML + CSS 实现"微光骨架屏（Shimmer Skeleton）"动效。 【效果】一组加载占位（圆形头像 + 两行标题条 + 大图块 + 两行文本条），每块底色为暗灰圆角色块，一道斜向微光周期性地从左到右扫过所有色块，光带边缘柔和。 【实现要点】每个占位元素 position:relative + overflow:hidden + 底色背景；扫光用共用的 ::after 规则：宽 50% 的半透明渐变光带，transform 从 translateX(-120%) 到 translateX(320%) 循环，角度用 linear-gradient(100deg, transparent, 高光色, transparent)；只动 transform 走合成器；will-change:transform。 【参数】CSS 变量：--base_color:#171a24（底块色）、--highlight_color:rgba(255,255,255,0.09)（高光色，需带透明度）、--dur_ms:1800（扫过周期）、--radius_px:10（圆角）、--sweep_deg:100（光带角度）。 【验收】所有色块的光带扫过节奏完全同步（同一动画同一周期）；60fps；光带从块外进、块外出，无突兀起止；reduced-motion 下光带隐藏但骨架结构保留；在深色页面上底块与背景有可感知的明度差。

请用纯 HTML + CSS 实现"扫光按钮（Shine Sweep）"动效。 【效果】深色微渐变按钮，hover 时一道斜切的白色高光带从左外侧快速扫到右外侧，扫过时中间亮两端透明淡入淡出，扫完光带完全离开按钮不残留；按钮同时有轻微的描边提亮与投影。 【实现要点】按钮 overflow:hidden + isolation:isolate 裁切光带；光带为绝对定位 span，宽度用按钮宽的百分比，背景 linear-gradient(to right, transparent, 白色, transparent)，skewX 负角度斜切，静止 left:-75% 藏在左侧外；hover 触发 keyframes 动画把 left 推到右侧外并首尾淡出；动画 forwards 结束保持离场状态；另给 body:not(:hover) 一套错峰自动演示动画，光标进入即失效。 【参数】CSS 变量：--beam_color:rgba(255,255,255,0.85)（高光色）、--bg_color:#262a3d（按钮底色）、--text_color:#f5f6ff、--dur_ms:900、--beam_w:42（光带宽，占按钮宽百分比）、--beam_angle:18（skew 倾斜角，deg）。 【验收】光带扫过时两端透明中间亮、无生硬边缘；扫完按钮上无残留高光；连移入移出多次动画每次都完整重放；任意按钮宽度下光带比例正常；reduced-motion 下完全静止。

请用纯 HTML + CSS 实现"线性开关（Slide Toggle）"动效：扁平现代风格的滑动开关，与辉光系开关区分，禁止使用发光阴影。 【效果】胶囊轨道内有一个白色圆钮：关闭时轨道深灰、右侧透出 OFF 字样；打开时轨道变绿、圆钮滑到右端带轻微过冲，左端浮现 ON 字样；按下未松开时圆钮临时横向拉长，松开回弹；ON/OFF 文字随滑块经过交叉淡入淡出。 【实现要点】checkbox + label 结构，input 视觉隐藏保留焦点；轨道 overflow:hidden + 纯色背景 + 1px 描边（无辉光）；圆钮位移用 :checked 驱动 translateX，缓动带轻微过冲；:active 时圆钮 width 拉长做按压手感；ON/OFF 为绝对定位等宽字，opacity 随选中态交叉过渡；轨道宽/高/圆钮尺寸/行程全部 calc 从 --track_w 推导。 【参数】CSS 变量：--on_color:#3fae90（开启色）、--off_color:#262b3d（关闭色）、--knob_color:#f5f7ff（圆钮色）、--track_w:74（轨道宽 px）、--dur_ms:240、--radius_px:999（6=方角，999=胶囊）。 【验收】圆钮行程与任意轨道宽度匹配；按压拉长→松开回弹连贯；ON/OFF 文字不与圆钮重叠穿帮；键盘 Tab 聚焦有焦点圈；无任何 box-shadow 辉光；reduced-motion 下瞬时切换。

请用 HTML + CSS + 原生 JS 实现"步骤进度（Steps Progress）"分步条动效。 【效果】横向步骤条：已完成步骤的圆点填充绿色并旋出对勾，当前步骤圆点蓝色描边、外圈淡蓝光环并微放大，未到步骤灰色描边；两步之间的连接线在推进时从左向右铺满成渐变色，回退时向左收回；下方按钮控制前进一步/后退一步，边界时按钮禁用。 【实现要点】每步为 li：圆点 + 标签；连接线画在 li::before（底轨）与 ::after（进度线 scaleX(0→1) origin:left），由相邻选择器 .is-done + li::after 驱动；对勾用 ::before 式的边框 L 形（border-left+border-bottom 旋转 -45°）scale(0→1) 回弹出现；当前步光环用 box-shadow 0 0 0 5px color-mix 半透明强调色 + scale(1.08)；JS 维护步骤索引，切 is-done/is-active 类与按钮 disabled，同步 aria-current="step"。 【参数】CSS 变量：--done_color:#3fae90（已完成）、--active_color:#5e8bff（当前步）、--track_color:rgba(255,255,255,0.12)（底轨）、--dot_size:26（圆点直径 px）、--dur_ms:500、--ease:cubic-bezier(0.65,0,0.35,1)。 【验收】前进/后退任意步序状态与线条都正确（含跳回第 1 步）；对勾弹出有回弹感；光环不遮挡标签文字；键盘可聚焦按钮操作；60fps；reduced-motion 下瞬时切换。

请用 HTML + CSS 实现"提示气泡（Tooltip Fade）"动效。 【效果】深色胶囊按钮上方悬停或键盘聚焦时，一个带小箭头的深色气泡延迟约 350ms 淡入并轻微上浮；箭头尖指向按钮中心；移开时气泡立即淡出；延迟期间快速扫过不会闪现气泡。 【实现要点】提示文案放在锚点元素 data-tip 属性里，气泡用 ::after 的 content:attr(data-tip) 生成；箭头用 ::before 做 10px 旋转 45° 正方形，只保留朝下的两条边框模拟尖角；定位 bottom:calc(100% + gap) + left:50% + translate:-50%；淡入通过 transition 的 delay 段实现（opacity/translate 带 .35s 延迟），移出时 visibility 立即延迟归零保证快速消失；显隐组合 opacity + visibility + translate，pointer-events:none；:focus-visible 与 :hover 等效。 【参数】CSS 变量：--tip_bg:#23273a、--tip_text:#e8eaf2、--tip_radius:8、--fade_ms:260（淡入时长）、--delay_ms:350（出现延迟）、--arrow_gap:10（气泡与锚点间距 px）。 【验收】淡入带 4px 上浮位移、气泡与箭头同步出现无缝衔接；快速扫过不闪现；键盘聚焦同样触发；气泡文字任意长度不截断按钮布局；reduced-motion 下延迟清零、显隐即时。

请用纯 HTML + CSS 实现"下划线绘制（Underline Draw）"动效。 【效果】一排深色导航链接，默认只有灰字无线条；hover 时一条 2px 圆头彩色下划线从文字左侧向右画出，移开时向右收回消失，文字颜色同步提亮再回落；还有一个从右画出向左收的反向变体；当前页链接（aria-current）线条常亮。 【实现要点】链接 ::after 伪元素做线条层，height 与颜色用 CSS 变量；默认 transform:scaleX(0) + transform-origin:right，hover 时 scaleX(1) + origin:left，靠进出态 origin 换向实现"左进右出"的方向流；反向变体交换 origin；状态选择器同时覆盖 :hover、:focus-visible 与 [aria-current="page"]；只动 transform 不动 width。 【参数】CSS 变量：--line_color:#5e8bff、--line_h:2（线条粗细 px）、--dur_ms:320、--text_color:#e8eaf2（hover 文字亮色）、--ease:cubic-bezier(0.65,0,0.35,1)。 【验收】移入从左画出、移出向右收回（方向连贯）；键盘 Tab 聚焦与当前页常亮均有线条；线条任意帧不截断文字、不触发重排；四个链接观感一致；reduced-motion 下线条即时出现消失。

请用 HTML + CSS + 原生 JS 实现"翻牌计数（Flip Counter）"动效。 【效果】机械翻页时钟式的数字牌：一张牌被中缝分成上下两半，翻数时上半面像纸片一样向下折落（旧值消失），随即新值的下半面从折痕处向下展开落定；个位先翻、十位错峰跟进形成进位节奏；可点击按钮触发 +1，空闲时自动演示。 【实现要点】牌面 = 上下两个 overflow:hidden 的半窗（各显示同一整字的半截：伪元素行高 = 整卡高，下半内容 translateY(-50%)）+ 动态翻板；翻页两段式——上翻板 rotateX(0→-90°)（transform-origin: bottom），animationend 后上半窗换新值、下翻板 rotateX(90°→0°)（transform-origin: top）展开，再 animationend 后下半窗换新值并移除翻板；容器 perspective、翻板 backface-visibility:hidden；插入翻板后强制 reflow 再加动画类；aria-live=polite 通报数值。 【参数】JS 从 CSS 变量读取：--dur_ms:620（翻牌时长）、--ease:cubic-bezier(0.4,0.1,0.2,1)；CSS 变量：--card_w:64（牌宽，牌高 = 1.32 倍）、--font_px:44、--num_color:#f2f5ff、--card_color:#1c2030、--accent:#7b8cff。 【验收】翻转任意暂停帧上下半面都拼成完整数字（无错位半格）；两段衔接无跳变、无镜像闪现；连续快速触发不残留翻板（DOM 恒定）；进位错峰节奏自然；60fps；reduced-motion 下数值直接切换无翻板。

请用纯 HTML + CSS 实现"故障文字（Glitch Text）"动效。 【效果】一行等宽粗体标题平时干净静止，周期性爆发出短暂的信号干扰：青色与品红两层错位重影从字形边缘露出并横向抽动，像 RGB 通道错位；每次爆发只持续零点几秒，随后立刻回到干净状态，循环往复；下方配一行等宽小字注释。 【实现要点】h1 带 data-text 属性，::before/::after 用 content: attr(data-text) 生成两份彩色重影，z-index 设为 -1/-2 压在主体文字下方；两条 keyframes 各自只在部分时间窗口把 opacity 拉到 1，并用 clip-path: inset(...) 只保留一条横带、translate 做 ±offset 错位，动画时间函数用 steps(1, end) 让每段硬切跳变；两条影子的爆发窗口部分重叠形成双色同屏；动画属性仅 transform/clip-path/opacity。 【参数】CSS 变量：--offset_px:3（错位距离）、--dur_ms:3400（故障周期）、--font_px:44（字号）、--glitch_a:#4cd7d0 与 --glitch_b:#e0559c（双影双色）、--text_color:#f2f3f8。 【验收】静息时文字完全干净可读；爆发时主体字形始终完整、彩色重影只在边缘与横带内出现；steps 切换为硬切无渐变拖影；循环周期稳定不跳变；reduced-motion 下双影隐藏、文字静态显示；改 data-text 文案后效果不变。

请用纯 HTML + CSS 实现"流光渐变字（Gradient Flow Text）"动效。 【效果】一行粗体标题内部有渐变流光持续横向流动：银白基底上紫色与蓝色的光带周期性掠过，循环无缝、速度均匀；下方配一行等宽小字注释。 【实现要点】background-image: linear-gradient(90deg, a 0%, b 33%, c 66%, a 100%)（首尾同色保证周期性）；background-size: 200% 100%；-webkit-background-clip: text 与 background-clip: text 双写，color: transparent；keyframes 让 background-position 从 0% 到 200% 线性无限循环；加 @supports not (background-clip:text) 降级为纯色。 【参数】CSS 变量：--grad_a:#f2f3f8、--grad_b:#7b7fbd、--grad_c:#5e93c4（低饱和三色，a 同时是首尾色，银白基底上只有一抹淡彩掠过）、--dur_ms:4200（周期）、--font_px:34（字号，容器较窄时会自动换行、不会裁切）、--angle_deg:90（渐变角度）。 【验收】流动连续无接缝感（循环回起点无跳变）；60fps；三色参数任改其一立即生效且仍无缝；文字保持可读、未被渐变矩形污染；reduced-motion 下停止流动显示静态渐变。

请用纯 HTML + CSS 实现"荧光划过（Highlight Sweep）"动效。 【效果】一句话中的关键词被一支『荧光笔』从左到右划过：一条微微倾斜的荧光色带从词首推进到词尾，完全盖住文字后文字翻成深色，停留片刻再快速退场，循环往复；荧光带压在文字中下部、末端斜切，像真实马克笔笔触。 【实现要点】mark 上用 no-repeat 的单色 linear-gradient 作 background-image，keyframes 驱动 background-size 从 0% 到 100% 宽（高为 --height_pct）实现推进；background-position 定位条带纵向位置，渐变角度 90deg + skew 做斜切笔触；文字色切换用带延迟的 transition + keyframes color 帧，保证荧光盖满后才翻深色；mark 元素要覆盖 UA 默认的 background-color；循环动画把退场收进同一组关键帧。 【参数】CSS 变量：--hl_color:#d9e05b（荧光色）、--dur_ms:900（划过时长）、--height_pct:62（条带高度，>100 可包住整字）、--skew_deg:-8（笔触倾斜）、--hl_text:#10121a（盖住后的文字色）、--ease:cubic-bezier(0.22,1,0.36,1)。 【验收】推进方向严格从左到右、无纵向闪烁；全程文字完整可读（浅底浅字瞬间不存在）；换行文本中高亮逐行生效不串行；60fps；reduced-motion 下荧光静态常显、文字深色可读；改荧光色为深色系后文字对比仍成立。

请用纯 HTML + CSS 实现"无限跑马灯（Marquee Loop）"动效。 【效果】一行大号等宽词组（词间以彩色圆点分隔）从右向左匀速滑过，循环完全无缝——任意时刻画面上都是等距的词组节奏；内容在容器两端渐隐浮现和消失，没有生硬的裁切边缘。 【实现要点】内容完整写两份拷贝放进同一个 flex track（width: max-content），keyframes 从 translateX(0) 线性动画到 translateX(-50%)，一个周期恰好平移一份内容的长度实现无缝；间距统一用 flex gap（不要混用 padding）；容器 overflow:hidden，mask-image: linear-gradient(90deg, transparent, #000 fade, #000 calc(100%-fade), transparent) 做两端渐隐（双写 -webkit- 前缀）；动画只动 transform。 【参数】CSS 变量：--dur_s:16（走过一份内容的循环时长）、--font_px:40（字号）、--gap_px:56（词间距，写在容器内联变量）、--fade_px:72（两端渐隐宽度，0 关闭）、--text_color:#f2f3f8、--accent:#7b8cff（分隔点）。 【验收】循环回起点无任何跳变或间距异常；两端渐隐平滑、无裁切硬边；60fps；增删词组或改 gap 后仍无缝（保持两份拷贝一致）；reduced-motion 下停止滚动、静态完整展示内容且无渐隐裁切。

请用 HTML + CSS 实现"描边空心字（Outline Stroke）"动效。 【效果】一行大号粗体标题呈描边空心状态悬停，鼠标移入时实心颜色从文字底部向上灌满整个字形（填充沿水平裁切线推进，描边同时变为填充色），移出时反向退回空心；页面空闲时填充层按周期自动涨落演示。 【实现要点】双层同文案文本：底层 -webkit-text-stroke 描边 + color: transparent 做空心字；上层 position:absolute inset:0 的实心填充字，用 @property 注册 --fill_pct（syntax "&lt;percentage&gt;"），填充层 clip-path: inset(calc(100% - var(--fill_pct)) 0 0 0)；hover 时把 --fill_pct 过渡到 100%（transition --fill_pct），自动演示 keyframes 也直接驱动该变量，两条路径同源不打架；两层必须同字体/字号/字距对齐；自动演示包在 @media (prefers-reduced-motion: no-preference) 内且仅 :not(:hover) 播放。 【参数】CSS 变量：--stroke_w:2（描边宽度 px）、--dur_ms:700（填充时长）、--font_px:58（字号）、--stroke_color:#f2f3f8、--fill_color:#7b8cff、--ease:cubic-bezier(0.22,1,0.36,1)、--fill_pct 注册变量（0%=空心，100%=满填）。 【验收】静止态空心字完整可读、描边均匀无锯齿；填充沿水平线推进、无闪烁或两层错位；移入移出均可平滑往返；悬停优先于自动演示（不互相抢动画）；reduced-motion 下无自动动画、悬停即时填满；改字号/描边宽度后两层仍精确对齐。

请用纯 HTML + CSS 实现"硬阴影弹跳（Shadow Pop）"动效。 【效果】neobrutalism 风格的标题卡片与词组 chip：2px 实线描边 + 无模糊的彩色偏移硬阴影；鼠标悬停时元素向左上方弹起，硬阴影同步向右下伸长（像物体被顶起），按下时位移与阴影同时归零压回平面，手感干脆带一点回弹。 【实现要点】box-shadow: x y 0 0 color（blur 与 spread 必须为 0 才是硬阴影）；hover 时 transform: translate(-lift, -lift) 且阴影从 shadow 增长到 shadow + lift——位移量与阴影增量相等是弹起可信的关键；transition 同时过渡 transform 与 box-shadow，缓动用带超调的回弹曲线 cubic-bezier(0.34,1.56,0.64,1)；:active 把位移与阴影归零形成按压；chip 加 :focus-visible 复用悬停态。 【参数】CSS 变量：--shadow_px:6（静息阴影偏移）、--lift_px:4（弹起距离）、--dur_ms:160（过渡时长）、--shadow_color:#7b8cff、--card_color:#171a2b、--text_color:#f2f3f8、--ease:cubic-bezier(0.34,1.56,0.64,1)。 【验收】静息态描边 + 硬阴影边缘锐利无模糊；悬停弹起与阴影伸长严格同步、无悬空感；按下压平反馈干脆；键盘 focus 有与 hover 一致的状态；60fps；reduced-motion 下无位移动画但控件功能完整。

请用纯 HTML + CSS 实现"逐字入场（Stagger Reveal Text）"动效。 【效果】一行标题的每个字符依次从下方浮入：起始状态是下移 + 模糊 + 全透明，逐字错峰上浮聚焦到清晰；全部亮起停留片刻后，再按同样次序向上浮出消散，如此循环，形成波浪式的呼吸节奏。 【实现要点】每个字符包一个 span 并内联 style="--i:序号"；span 上设置 animation-delay: calc(var(--i) * var(--stagger_ms) * 1ms)，所有字符共用一条 keyframes（0% 隐藏下沉带 blur → 16%-58% 清晰 → 80% 上浮消散）；animation-fill-mode:both 保证延迟期间保持初始隐藏；h1 加 aria-label、span 加 aria-hidden。 【参数】CSS 变量：--dur_ms:3600（循环周期）、--stagger_ms:90（逐字间隔）、--rise_px:16（上浮距离）、--blur_px:8（模糊强度，可为 0）、--text_color:#f2f3f8。 【验收】逐字错峰清晰可辨、波形连贯不追尾；整循环无缝衔接；60fps（filter 只作用于少量字符）；reduced-motion 下直接静态显示完整文本；任意字符数通用（改 span 数量即可）。

请用纯 HTML + CSS 实现"文字遮罩滚动（Text Mask Scroll）"动效。 【效果】一行粗体标题的字面是暗色渐变基底，一道斜向的窄亮带（白 + 蓝紫光晕）在文字内部周期性往返扫过，像光照在金属字面上移动；亮带扫走后文字回到均匀暗色，任何时刻文字都完整可读。 【实现要点】background-image 用三段式线性渐变（暗基底 a → 亮带 b/c → 暗基底 a，亮带停靠点 calc(50% ± band*1%/2)，单位换算不能省，否则渐变整体失效、透明文字隐形）；background-size: 300% 100%；-webkit-background-clip: text 双写 + color: transparent；keyframes 让 background-position 在 0% ↔ 100% 间用 alternate 往返；@supports not (background-clip: text) 时降级纯色；reduced-motion 下停帧在 50% 居中构图。 【参数】CSS 变量：--dur_ms:3200（单程扫过时长）、--band_pct:22（亮带宽度）、--font_px:46（字号）、--angle_deg:100（亮带角度）、--mask_a:#565e88（基底字色）、--mask_b:#f2f3f8（高光色）、--mask_c:#7b8cff（光晕色）。 【验收】亮带往返扫过、方向连贯无跳变；任意帧文字是完整的渐变字（无透明断裂或裁切）；60fps；三个颜色参数任改其一立即生效且层次依然成立；reduced-motion 下静态停帧、文字完整可读；不支持 background-clip:text 的环境显示纯色文字。

请用 HTML + CSS + 原生 JS 实现"字符扰动（Text Scramble）"动效。 【效果】一行等宽标题从随机符号乱码中逐渐解码成形：先是一整行跳动的 !<>-_[]*# 类符号，随后字符从左往右依次锁定为真实文案，未落定的字符保持噪点色，落定后整行恢复主色并静止；可点击按钮重放，空闲时自动周期重演。 【实现要点】文案放元素的 data-final 属性，JS 读取后为每个字符生成随机 [from, to) 帧区间（from 从左往右递增形成解锁次序）；requestAnimationFrame 驱动，但用时间戳节流——每 --char_ms 才刷新一次随机符号，避免逐帧闪烁；未解锁位输出 \u00a0 占位、等宽字体保证宽度稳定；全部锁定后停止 rAF 并恢复主色；扰动中切换 is-scrambling 类染噪点色；h1 用 aria-label 承载语义、内部 span aria-hidden。 【参数】JS 常量从 CSS 变量读取：--char_ms:42（换字间隔）、--cycle_ms:3600（自动重放周期）、--settle_ms:130（落定过渡）；颜色 --text_color:#f2f3f8、--noise_color:#6f7bb8；--font_px:40。 【验收】解码推进方向明确（左→右）、落定字符不再回跳；扰动全程宽度零抖动、不换行；60fps 且 document.hidden 时自动暂停；按钮重放与定时重放互不打断进行中的动画；reduced-motion 下直接显示完整文案不做扰动。

请用纯 HTML + CSS 实现"打字机（Typewriter）"动效。 【效果】一行等宽字体标题被光标逐字打出：文字沿字格一个个出现，光标竖线始终贴在最后一个字符右侧闪烁；打满后停留片刻，再逐字删除回空行，如此循环；下方配一行常显的等宽灰字基准。 【实现要点】文本包在 inline-block 的 span 里，overflow:hidden + white-space:nowrap；keyframes 让 width 从 0ch 到 10ch（字符数）循环，打字段与删除段分别用 steps(10, end) 逐格推进，停留段用 steps(1, end)；光标用 span 的 border-right 实现，配合独立的 steps(1) 闪烁动画；h1 加 aria-label、span 加 aria-hidden。 【参数】CSS 变量：--dur_ms:5200（打字周期，含停留与删除）、--caret_blink_ms:900（光标闪烁间隔）、--font_px:34（字号）、--text_color:#f2f3f8、--caret_color:#7b8cff。 【验收】逐字推进严格按字格对齐、无半字符裁切；光标在空行与满行状态都持续闪烁；循环衔接自然（删除到空后立刻重新打字）；reduced-motion 下静态显示完整文本且无光标闪烁；更换文案时只需同步文本、ch 数与 steps 数三处。

请用纯 HTML + CSS 实现"波浪文字（Wave Text）"动效。 【效果】一行标题的每个字符按次序上下起伏，形成从左向右行进的正弦波：字符依次升到波峰（波峰微微亮起变色）再落入波谷，循环不断；波形连续平滑、开场即是稳定行进态。 【实现要点】每个字符包一个 span 并内联 style="--i:序号"；span 播放同一条 keyframes（0%/100% 下移 amp、50% 上移 amp 并换波峰色），缓动 ease-in-out 近似正弦；animation-delay: calc(var(--i) * var(--phase_ms) * -1ms) 用负延迟错峰，加载即处于稳定波形；容器 line-height 留足上下波幅空间防裁切；动画只动 transform。 【参数】CSS 变量：--dur_ms:2000（波动周期）、--amp_px:10（波幅）、--phase_ms:90（逐字相位差，决定波峰个数）、--font_px:44（字号）、--text_color:#f2f3f8（基底色）、--peak_color:#7b8cff（波峰色，设为同色即关闭染色）。 【验收】波形连续行进、无整体同步跳动；页面加载即处于稳定波形（不从静止突跳）；任意帧字符完整不裁切；60fps（transform 合成器路径）；reduced-motion 下静态显示完整文本；改字符数后波形依然连贯。

请用纯 HTML + CSS 实现"极光背景（Aurora Background）"动效。 【效果】深夜色背景上三条彩带状光幕（低饱和的深蓝-蓝-蓝灰横向渐变、两端透明消散）缓慢左右摆动、轻微旋转与纵向胀缩，彼此相位错开、交叠处轻微提亮，整体被大角度倾斜与柔化模糊，像极光在夜空中流动；四周有暗角。整体氛围克制、低饱和，不刺眼。 【实现要点】容器 absolute inset:-30% -20% + rotate(tilt) + filter:blur() saturate(1.05)（模糊只做一层）；每条光带是长条 div，background 为 linear-gradient(90deg, transparent, 色1, 色2, transparent)，mix-blend-mode:screen，透明度分层 0.68 / 0.5 / 0.4；各自 keyframes（translateX ±7% + rotate ±2.5deg + scaleY 变化，alternate infinite ease-in-out），时长取 1x / 1.3x / 0.8x 并用负 delay 错开相位；body::after 叠径向暗角；全程只动 transform。 【参数】CSS 变量：--aurora_a:#3e6fa8、--aurora_b:#4c8fc0、--aurora_c:#8a93c4（低饱和靛蓝-蓝灰家族三档明度）、--speed_s:16（基准周期）、--blur_px:36、--tilt_deg:-10（整体倾角）、--base:#0c0e15（夜空底色）。 【验收】三条光带相位不同步、运动往复无跳变；容器边缘无硬边；60fps；整体饱和度低、明度差小，长时间观看不刺眼；reduced-motion 下静止为静态极光。

请用纯 HTML + CSS 实现"暮色辉光（Ember Glow）"动效。 【效果】暖黑夜色底部升起三团低饱和的琥珀色光晕（像画外有一堆将熄的余烬），各自以 7-11 秒的周期缓慢呼吸（轻微胀缩与起伏），相位互不相同；光的重心压在画面下三分之一，上方留出深色空间；四周是暖黑色暗角，整体安静温润不刺眼。 【实现要点】容器 absolute inset:-22% 出血 + filter:blur(44px) saturate(1.05)（模糊单层）；三个 aspect-ratio:1 的圆形 radial-gradient 光团贴在底部（bottom 为负值出血），mix-blend-mode:screen，透明度 0.6x / 0.45x / 0.35x 分层；共用一组 keyframes（scaleY 0.92→1.12 + translateY ±2%，alternate infinite ease-in-out），周期 1x / 1.35x / 0.7x、负 delay 错相位；底层放静态暖色地光 wash 常显；body::after 叠暖黑径向暗角（rgba(8,5,3)，不用纯黑）；全程只动 transform + opacity。 【参数】CSS 变量：--ember_a:#96683c（主辉光色，低饱和琥珀）、--ember_b:#7a4530（深烬色）、--breath_s:8（基准呼吸周期）、--glow_strength:0.6（辉光强度总控）、--base:#130e09（暖黑底色）。 【验收】三团光呼吸相位不同步、往复无跳变；60fps（transform-only，模糊单层）；整体饱和度低（无荧光橙红感）；任意帧下方始终有地光、无大面积纯黑；reduced-motion 下光团静止但构图完整。

请用纯 HTML + CSS 实现"雾气漂移（Fog Drift）"动效。 【效果】深蓝灰夜色上三团宽扁的雾带缓慢左右漂移、微微起伏，彼此相位错开、交叠处轻微提亮，边缘完全消散没有边界，像山谷夜雾在无声流动；画面整体低饱和、亮度起伏极小，任何时刻都有一层静态雾垫底，不会出现纯黑。 【实现要点】容器 absolute inset:-30% -20% 出血 + filter:blur(60px)（模糊只做这一层）；每团雾是宽 110%、高 30-36% 的椭圆 div，background 为 radial-gradient(closest-side, 雾色, transparent 72%)，mix-blend-mode:screen，透明度按主雾 1x / 0.8x / 0.62x 分层；各自 keyframes 只做 translateX ±6-7% + translateY ±2%（alternate infinite ease-in-out），周期 1x / 1.35x / 0.75x 并用负 delay 错相位；底层加一条静态雾带 wash 常显（0.8x 主雾浓度档，保证任意帧有可见雾流）；body::after 叠径向暗角（边缘不超过 0.5）；全程只动 transform。 【参数】CSS 变量：--fog_a:#5b6f99、--fog_b:#7787ad（蓝灰低饱和双色，亮度与底色明显拉开）、--drift_s:26（基准漂移周期）、--blur_px:60、--fog_opacity:0.55（雾浓度总控）、--base:#10131c。 【验收】三团雾相位不同步、运动往复无跳变；容器边缘无硬边；60fps（transform-only，模糊单层）；--fog_opacity 调到 0.2 时画面仍不是纯黑；reduced-motion 下雾静止但雾景完整。

请用纯 HTML + CSS 实现"动态渐变网格（Animated Gradient Mesh）"动效。 【效果】深色背景上三团彩色柔光（径向渐变圆斑）缓慢游移、胀缩、互相交叠，交叠处用 screen 混合自然提亮，整体像缓慢呼吸的极光色雾；四周有暗角收拢视线。 【实现要点】容器 absolute inset:-25% 出血 + filter: blur() saturate(1.15)（模糊只做这一层）；三个 46% 宽的圆斑，background 为 radial-gradient(closest-side, 色值, transparent 72%)，mix-blend-mode:screen，三斑透明度分层（0.9 / 0.75 / 0.7）拉开明度差；每个斑独立 keyframes（translate + scale，alternate infinite ease-in-out），时长按 1x / 1.35x / 0.75x 制造速度差；body::before 叠加极轻的中心提亮、body::after 叠加径向暗角；全程只动 transform。 【参数】CSS 变量：--color_a:#5e5ce6、--color_b:#5b8cc4、--color_c:#8a8fd6（靛蓝-蓝灰家族三档明度）、--speed_s:14（基础周期，另两斑按倍率推导）、--blur_px:52、--base:#14161f。 【验收】光斑运动无跳变（alternate 往复）；容器边缘无硬边露出；60fps（transform-only，模糊单层）；改任一颜色立即生效；reduced-motion 下光斑静止但仍呈现静态色雾。

请用纯 HTML + CSS 实现"渐变轨道（Gradient Orbits）"动效。 【效果】深靛蓝底上三团彩色柔光各自沿一条倾斜的椭圆轨道匀速公转，轨道倾角、大小、周期、方向互不相同，光斑交错经过时交叠处轻微提亮，像三颗行星在不同的轨道面上安静运行；整体被柔化模糊，四周有暗角。 【实现要点】三层嵌套结构：ring（absolute 定尺寸，静态 transform: rotate(倾角) scaleY(0.5-0.72) 把圆压成倾斜椭圆）> spin（inset:0，animation: rotate 0→360deg linear infinite，transform-only）> spot（left:82% top:50% 固定在盒缘的圆形 radial-gradient 光斑，mix-blend-mode:screen）；三条轨道周期 1x / 1.5x reverse / 0.7x；容器 inset:-25% 出血 + 统一 filter:blur() saturate(1.15)；底层放静态中心光晕 wash 常显，body::after 叠暗角。 【参数】CSS 变量：--color_a:#5e5ce6、--color_b:#5b8cc4、--color_c:#8a93c4（靛蓝-蓝灰家族三色）、--orbit_s:24（基准公转周期，另两条按倍率推导）、--blur_px:36、--base:#101220。 【验收】三个光斑沿各自椭圆轨道连续运行、无跳变；轨道方向与周期互不相同；60fps（单动画 transform-only，模糊单层）；光斑交叠处提亮自然；reduced-motion 下光斑静止但轨道构图完整。

请用 HTML + CSS（@property）实现"网格脉冲（Grid Pulse）"动效。 【效果】深色底上一张细网格，一团更亮的网格区域从画面中心周期性向外扩散、照亮经过的网格线后再收回，像一圈电波沿网格传播；中心常驻一团极淡辉光，网格线低透明度不刺眼。 【实现要点】基础网格层：background-image 用横竖两组 linear-gradient(色 1px, transparent 1px)，background-size 统一由参数控制；亮网格层：同样的网格但用更亮的线色，再叠 mask-image: radial-gradient(circle at 50% 56%, #000 calc(R - 22%), transparent R)，其中 R 是用 @property（syntax "<percentage>"）注册的 --pulse_r；keyframes 让 --pulse_r 在 0%→88%→0% 之间插值（注册后自定义属性可动画），亮区随之扩散收缩；底层放静态中心辉光常显。 【参数】CSS 变量：--grid_size:44（网格间距 px）、--grid_color:rgba(130,148,200,0.14)（基础线色）、--grid_hot:rgba(150,175,245,0.42)（脉冲线色）、--pulse_s:5（脉冲周期 s）、--pulse_r:26%（无 @property 时的静态回退半径）、--base:#0a0c12。 【验收】亮区扩散与收回连续平滑（<percentage> 插值生效）、周期准确；60fps、重绘范围仅限单层网格；不支持 @property 的浏览器显示静态 26% 亮区且不报错；网格间距参数改动立即生效且线对齐无锯齿；reduced-motion 下脉冲静止、网格完整。

请用纯 HTML + CSS 实现"液态光斑（Liquid Blob）"动效。 【效果】深蓝夜色上两团彩色柔光像有表面张力的液体一样持续蠕动变形：轮廓不断在有机的鼓包与凹陷间变化、带着轻微旋转与胀缩，两团相位错开、交叠处轻微提亮；边界完全柔化无硬边，四周有暗角。 【实现要点】容器 absolute inset:-20% 出血 + filter:blur() saturate(1.1)（模糊只做一层）；每团是一个 aspect-ratio:1 的 div，background 为 radial-gradient(closest-side at 38% 34%, 高光色, 主色 62%, transparent 76%)（高光圆心偏移制造受光面），mix-blend-mode:screen；morph keyframes 在 0/33/66/100% 三组不规则 border-radius（如 42% 58% 63% 37% / 45% 42% 58% 55%）与 rotate ±40deg、scale 0.95-1.08 之间缓动；两团周期 1x / 1.4x、负 delay 错相位；底层放静态光晕 wash 常显；全程只动 transform + border-radius。 【参数】CSS 变量：--blob_a:#4a5aa8（液团主色）、--blob_b:#4780b0（高光色）、--morph_s:16（蠕动周期）、--blur_px:40、--base:#0e1120。 【验收】轮廓变化连续无跳变（首尾 keyframes 形状一致闭合循环）；60fps（重绘限制在容器 blur 层内）；容器边缘无硬边；两团相位不同步；reduced-motion 下液团静止但形态完整有机。

请用纯 HTML + CSS 实现"噪点颗粒（Noise Grain）"动效。 【效果】深色底光上覆盖一层细腻的单色胶片颗粒，颗粒以细碎的步进不停『跳闪』（每秒数次、无方向性），像老电影胶片的物理噪点；颗粒只在暗部压暗、亮部提亮，整体质感干净不脏，四角有暗角。 【实现要点】颗粒层 background-image 用内联 SVG（feTurbulence type=fractalNoise baseFrequency≈0.8 numOctaves=2 + feColorMatrix saturate 0）转 data-uri 平铺，background-size 由参数控制；元素 inset:-60% 超出画布；动画用 steps(1, end) + 8 段 keyframes，每段 translate 偏移 ±3% 内直接跳变不插值，只动 transform；mix-blend-mode:overlay + 低透明度（约 0.16）控制强度；底层放静态 radial-gradient 光晕 wash，顶层叠径向暗角。 【参数】CSS 变量：--grain_opacity:0.16（颗粒强度 0.05-0.35）、--grain_size:240（颗粒尺寸 px）、--flicker_s:0.9（跳变周期）、--wash_a:#26314c（底光色）、--base:#0b0d13。 【验收】颗粒呈步进跳闪、绝无平滑滑动；data-uri 无外部请求、控制台零报错；60fps（transform-only）；颗粒强度 0.35 时仍能看清底光层次；任意帧无无纹理边缘露出；reduced-motion 下颗粒静止但质感仍在。

请用纯 HTML + CSS 实现"粒子漂浮（Particle Float）"动效。 【效果】深蓝夜色中近二十颗小光点持续上浮：从画面下方缓缓升起、途中轻微侧摆划出弧线、到顶部渐隐消失，循环不息；各粒子的大小、速度、相位、摆向各不相同，像夜空里缓慢上浮的浮尘；背景垫着极淡的冷色微光。静息任意帧都有十余颗粒子清晰可辨。 【实现要点】每颗粒子是一个小圆 i 元素，background 为 radial-gradient 实心核心 + 渐隐边（色标 0%/45%/75%）；定位与个性全靠每粒子一组自定义属性（--l 横向位置 / --t 初始纵向 / --sc 尺寸倍率 / --dur 周期倍率 / --sw 摆向）+ nth-child 手动排布；共用一条 keyframes：0% 淡入 → 8% 达到峰值亮度并保持到 82% → 50% 处 translate3d(摆向*摆幅, -55vh) → 100% translate3d(0, -125vh) 淡出，animation-duration 取基准周期 × 倍率、负 delay 错相位，首尾 opacity 0 掩盖循环重置；底层静态微光 wash 常显；全程只动 transform + opacity。 【参数】CSS 变量：--dot_color:#9db4e8（粒子色）、--dot_px:4（粒子基准尺寸 px）、--rise_s:14（基准上升周期）、--sway_px:34（横向摆幅 px）、--dot_o:0.8（粒子亮度峰值）、--base:#0a0c12。 【验收】粒子循环上浮无跳变（首尾淡入淡出衔接自然）；各粒子相位、速度、摆向互不相同；任意帧截屏至少十余颗粒子可见（实心核心 ≥3px、α≥0.5）；60fps（transform-only）；任何容器高度下粒子都能完整飘出顶部；reduced-motion 下粒子静止但画面仍是完整氛围底。

请用纯 HTML + CSS 实现"扫描线（Scanline）"动效。 【效果】深蓝黑底上一张细密的横向扫描线纹理，一条更亮的水平光带以恒定速度从屏幕顶部扫到底部循环往复（像 CRT 刷新），扫描线整体带极轻微的明暗抖动；中心有常驻的屏幕辉光，四角暗角收拢，复古终端氛围。 【实现要点】三层叠加：辉光层（静态 radial-gradient 常显）→ 扫描线层（repeating-linear-gradient(0deg, rgba(0,0,0,.9) 0 1px, transparent 1px gap) + 层级 opacity 控制强度 + 4s steps(2) 的微闪烁）→ 亮带层（22% 高的透明-亮-透明竖向渐变条，animation: translateY(-120%) → translateY(480%) linear infinite，transform-only）；顶层径向暗角；全程不遮挡交互（pointer-events 由容器内容承担）。 【参数】CSS 变量：--line_gap:4（扫描线间距 px）、--line_opacity:0.24（扫描线强度）、--band_s:6（亮带周期 s）、--band_color:rgba(170,200,255,0.07)（亮带色，低透明冷白）、--base:#06070c。 【验收】亮带匀速循环、无停顿回跳；扫描线随 --line_gap 参数改动即时重排且对齐像素；闪烁幅度收敛不眩晕；60fps（亮带 transform-only）；reduced-motion 下亮带与闪烁停止、静态扫描线纹理保留。

请用 HTML + CSS + 原生 JS 实现"追光背景（Spotlight Follow）"动效。 【效果】深色背景上的一团柔光像手电筒光斑一样跟随鼠标移动：光斑始终平滑地『滑』向光标位置（带惯性和延迟，不瞬移），移开后缓缓飘回或继续漂浮；光斑之外的区域保持极暗的环境光，画面永不全黑。 【实现要点】光斑是固定尺寸的圆形 div，background 为 radial-gradient(closest-side, 光色, transparent 68%)，mix-blend-mode:screen，位置由 CSS 变量 --lx/--ly（px 数值）经 transform: translate(var(--lx)*1px, var(--ly)*1px) translate(-50%,-50%) 驱动；pointermove 只更新目标点 tx/ty，rAF 循环里 x += (tx-x)*lerp 做线性插值后写回变量（lerp 约 0.08，从 --lerp 读取）；空闲 2.6s 后目标点改走 Lissajous 轨迹自动演示；底层垫一层极淡的静态环境光 wash。 【参数】CSS 变量：--spot_color:#7fa3d9（光斑色）、--spot_px:340（直径 px）、--spot_opacity:0.5（强度）、--lerp:0.08（跟随柔度，越小越绵软）、--base:#0a0c12。 【验收】光斑连续跟随无跳变、60fps（transform-only）；快速甩动光标时光斑平滑追上而不是瞬移；光斑移出后画面仍有环境光基底；触屏拖动同样生效；reduced-motion 下光斑静止在初始位置且控制台零报错。

请用纯 HTML + CSS 实现"星野闪烁（Starfield Twinkle）"动效。 【效果】深夜色背景上散布三层大小不同的星星，各自以不同周期、不同相位缓慢明暗闪烁（绝不齐步走）；背景垫着两团极淡的蓝紫色星云光晕与中心微光，四角有暗角收拢，整体安静克制。 【实现要点】三个全屏星层 div，每层 background-image 用一组 radial-gradient(calc(基准半径*倍率) at x% y%, 星色, transparent) 画星点，百分比定位随视口缩放；三层星点尺寸 0.7x / 1.1x / 1.6x，闪烁动画只动 opacity（0.3↔0.95 alternate ease-in-out），周期 1x / 1.45x / 1.9s 倍率并用负 animation-delay 错相位；底层静态星云 radial-gradient wash 常显；body::after 叠径向暗角。 【参数】CSS 变量：--star_color:#cfd9f2（星点色）、--nebula_a:#2c3b5e、--nebula_b:#1d2a47（星云双色）、--twinkle_s:4（基准闪烁周期）、--star_px:1.4（星点基准半径 px）、--base:#090b12（夜空底色）。 【验收】三层星点闪烁相位互不相同、往复无跳变；只动 opacity 不掉帧；任意帧都有星云基底、无大面积纯黑；缩放窗口星点分布不变形；reduced-motion 下星点静止但仍呈现完整静态星野。

请用 HTML + CSS + 原生 JS 实现"横向滚动带（Horizontal Scroll）"动效。 【效果】页面向下滚动时，一排面板随滚动进度横向滑过屏幕（垂直滚动兑换成水平位移），映射严格线性、松手即停；标题标签钉在舞台顶部全程可见，面板上下完整、只允许被左右裁切；最后一块面板对齐后滚动结束。 【实现要点】三层结构：外层 wrap 的高度由 JS 实测（stage.offsetHeight + shift，shift = track.scrollWidth − 舞台宽）；舞台 position:sticky top:0 height:100vh overflow:hidden，内部纵向 flex——顶部标签区（上下 20px 呼吸）+ flex:1 的轨道（align-items:center 让面板在剩余空间垂直居中）；轨道 flex 排布面板（宽度/间距来自 CSS 变量）并 will-change:transform；scroll 监听 passive + rAF 合帧，进度 p = clamp((scrollY − wrapTop) / shift)，track.style.transform = translate3d(−p × shift, 0, 0)；resize 时重新 measure 并即时 apply。 【参数】CSS 变量：--panel_w:58（面板宽度 vw）、--panel_gap:24（面板间距 px）、--accent:#5e5ce6、--accent2:#5b8cc4（序号渐变双色）、--base:#0e0f15。 【验收】横移与滚动严格线性、方向可逆、首尾对齐无留空或截断；60fps（translate3d + sticky）；面板宽/间距参数改动后位移量自动重算；窗口 resize 后不错位；reduced-motion 下跟随用户滚动、控制台零报错。

请用 HTML + CSS + 原生 JS 实现"行级显现（Line Reveal）"动效。 【效果】大标题按行为单位依次从下方升起：每行都被自身的遮罩接住，升起时文字只在遮罩内移动（下方视野外），一行接一行按约 110ms 级联，第二行用强调色；段落标题分组触发，同样的行级升起。 【实现要点】每行结构为外层 .lr-line（overflow:hidden 遮罩）+ 内层 .lr-inner（display:block），行序以行内 --i 标注；渐进增强：JS 就绪后加 armed 类才应用隐藏态（translateY(--line_y%)），组元素被 IntersectionObserver（threshold≈0.35）观测到后加 is-in，组内内层过渡到 translateY(0)，transition-delay = --i × --stagger_ms，缓动从 --line_ease 读取；只动 transform，触发后 unobserve。 【参数】CSS 变量：--line_y:115（起始位移 %）、--line_dur_ms:800（单行时长）、--stagger_ms:110（行间间隔）、--line_ease:cubic-bezier(0.19, 1, 0.22, 1)（升起缓动）、--accent:#5e5ce6（强调行色）。 【验收】任意中间帧文字都不超出遮罩、无半截字漂浮；行间级联节奏均匀、一次触发后回滚不重播；无 JS 环境标题完整可见；60fps（transform-only）；改 --line_y 为 60% 时文字初始位置仍完全藏在遮罩下方或按预期露出。

请用 HTML + CSS（scroll-driven animation）实现"滚动投影导航（Scroll Shadow Nav）"动效。 【效果】页面顶部固定一条透明悬浮的导航栏（只有 logo 与链接）；向下滚动约 80px 后，导航过渡为半透明实底 + 向下投影 + 毛玻璃模糊，像从背景里『抬起来』；滚回顶部投影即时退去。全程零 JS。 【实现要点】导航 fixed 定高；投影层画在 ::after（inset:0, z-index:-1：实底背景 + border-bottom + box-shadow + backdrop-filter:blur，opacity:0 初始），在 ::after 上声明 animation: 淡入 linear both + animation-timeline: scroll(root) + animation-range: 0 80px，keyframes 只动 opacity；hero 顶部 padding 引用 --nav_h 防遮挡；@supports not (animation-timeline: scroll()) 时 ::after 直接 opacity:1 常显降级。 【参数】CSS 变量：--nav_h:64（导航高度 px）、--nav_bg:rgba(14,15,21,0.78)（实底背景色）、--shadow_color:rgba(0,0,0,0.55)（投影色）、--shadow_blur:28（投影模糊 px）、--accent:#5e5ce6（logo 点色）。 【验收】Chrome/Edge 115+ 中投影出现/消失与滚动严格同步、0-80px 区间过渡平滑；60fps（opacity 合成器路径，无 box-shadow 逐帧重绘）；不支持的环境显示常显投影导航且不报错；导航文字在任何滚动位置不被内容覆盖截断；reduced-motion 不影响投影跟随。

请用 HTML + CSS + 原生 JS 实现"视差层次（Parallax Layers）"动效。 【效果】首屏 hero 里有两层装饰层（彩色光斑远景、漂浮光点中景）压在文字下方：滚动页面时远景以约 0.12 倍速率、中景以约 0.32 倍速率跟着移动，明显滞后于内容，产生『透过窗户看远近两排景物』的纵深；文字层不动，始终清晰。 【实现要点】hero 内两个 absolute 装饰层（上下各出血 35% 防露边，pointer-events:none，will-change:transform）；scroll 监听 passive + rAF 合帧，回调里 back.style.transform = translate3d(0, scrollY × rate_back, 0)、mid 同理（速率从 CSS 变量 --rate_back / --rate_mid 读取）；只写 transform，不动 top/margin。 【参数】CSS 变量：--rate_back:0.12（远景速率）、--rate_mid:0.32（中景速率）、--glow_a:#4a4c8f、--glow_b:#47729c（远景光斑双色）、--base:#0e0f15。 【验收】两层速率不同、位移与滚动严格线性、回滚精确归位；60fps（translate3d 合成器路径）；hero 边缘无露底；文字层静止清晰；reduced-motion 下图层静止且控制台零报错。

请用 HTML + CSS + 原生 JS 实现"滚动上升显现（Reveal Up）"动效。 【效果】页面向下滚动时，进入视口的模块（标题、正文、卡片）从下方约 26px 处上升并淡入，同一模块内的元素按 90ms 间隔级联入场，形成波浪感；每个元素只播放一次，回滚不回退。 【实现要点】渐进增强：默认可见，JS 就绪后给根元素加 armed 类才应用隐藏态（opacity:0 + translateY）；IntersectionObserver 一次性观测所有 .reveal 元素（threshold 从 CSS 变量读取，约 0.2），相交时加 is-in 并 unobserve；过渡写 transition: opacity, transform（时长与缓动从 CSS 变量读取），级联延迟 = 元素在 section 内的序号 × --stagger_ms，用内联 --i + calc 实现；只动 transform + opacity。 【参数】CSS 变量：--reveal_y:26（上升距离 px）、--reveal_dur_ms:700（显现时长）、--stagger_ms:90（级联间隔）、--reveal_threshold:0.2（触发阈值）、--reveal_ease:cubic-bezier(0.22, 1, 0.36, 1)（入场缓动）。 【验收】模块进入视口时按批次波浪式上升淡入、无闪烁；显现一次后回滚不消失；无 JS 环境内容完整可见；60fps（transform + opacity）；threshold 调到 0.6 时矮元素仍能触发；reduced-motion 下内容直接可见且控制台零报错。

请用 HTML + CSS（scroll-driven animation）实现"滚动进度条（Scroll Progress）"动效。 【效果】页面顶部固定一条 4px 渐变细线（轨道为极淡底色），进度随页面滚动从 0% 增长到 100%，滚动到哪进度就在哪，松手即停、往回滚即时回退，无任何 JS 事件监听。 【实现要点】顶部两层 fixed 元素：track（全宽淡色）与 progress（渐变条）；progress 设 transform-origin:0 50%、transform:scaleX(0)，animation: sp-grow auto linear both + animation-timeline: scroll(root)，keyframes 把 scaleX 从 0 过渡到 1；duration 必须写 auto 由时间轴接管；用 @supports not (animation-timeline: scroll()) 提供静态降级；配套写一段可滚动的长文档内容。 【参数】CSS 变量：--bar_h:4（条高 px）、--color_a:#5e5ce6、--color_b:#5b8cc4（渐变双色）、--track_color:rgba(255,255,255,0.07)。 【验收】Chrome/Edge 115+ 中进度与滚动位置严格同步、方向可逆；60fps 无掉帧（scaleX 合成器路径）；不支持的环境显示静态进度条且不报错；内容区滚动流畅；reduced-motion 不影响进度跟随（滚动位置驱动，非时间驱动）。

请用 HTML + CSS（scroll-driven animations）实现"段落高亮进度（Section Progress）"动效。 【效果】纵向四章的长文左侧有一条固定圆点导航：章节滚动进入视口约三分之一时，该章左缘的强调条从 0 生长到全高、底色泛起一层淡 wash 并保持常亮（累计式），对应的导航圆点同步放大、点亮并发光——读到哪里进度就在哪里，全程零 JS。 【实现要点】每个 section 用 view-timeline: --sN block 注册命名时间轴，body 上 timeline-scope: --s1 --s2 --s3 --s4 提升作用域；侧栏圆点 fixed 定位，第 N 颗 animation-timeline: --sN + animation-range: entry 35% entry 75% + fill both；章节自身的强调条（::before，scaleY 0→1，transform-origin 顶部）与 wash（::after，opacity 0→1）用 view() 时间轴、range entry 30%-80%；用 @supports not (animation-timeline: view()) 提供静态降级。 【参数】CSS 变量：--accent:#5e5ce6（强调色）、--accent_wash:rgba(94,92,230,0.07)（章节底色）、--dot_px:10（圆点尺寸 px）、--base:#0e0f15。 【验收】章节点亮与圆点点亮严格同章节、累计保持；不支持时间轴的环境静态可读不报错（Chrome/Edge 115+ 验证动效）；60fps（强调条 scaleY 合成器路径）；圆点位置固定不随内容滚动；reduced-motion 不影响进度跟随（滚动位置驱动）。

请用 HTML + CSS（scroll-snap）实现"滚动吸附分镜（Snap Stories）"动效。 【效果】四幕全屏分镜纵向排列，滚轮轻拨一幕、松手后画面自动对齐到当前分镜的起点（mandatory），每次滚动最多前进一幕不会跳幕；每幕居中展示渐变大序号、标题与说明，像全屏故事流翻页。全程零 JS。 【实现要点】根滚动器（html）声明 scroll-snap-type: y mandatory；每个 100vh 的 section 声明 scroll-snap-align: start + scroll-snap-stop: always；分镜内容用 grid place-content 居中并留足 padding，防止吸附边缘裁字；大序号用 linear-gradient + background-clip:text 做渐变字。可选：滚动 JS 辅助演示时用 scrollIntoView({behavior:"smooth"}) 步进，恰好展示吸附对齐。 【参数】CSS 变量：--snap_type:y mandatory（吸附强度，可换 y proximity）、--snap_align:start（对齐位置，可换 center）、--accent:#5e5ce6、--accent2:#5b8cc4（序号渐变双色）、--base:#0d0e15。 【验收】滚轮拨动后必然吸附对齐（mandatory）、一次滚动不跳两幕；proximity 模式下靠近才吸；每幕文字在任何吸附位完整可读；不支持 snap 的环境退化为普通滚动不报错；reduced-motion 不影响吸附行为。

请用 HTML + CSS（position: sticky）实现"卡片叠放（Sticky Stack）"动效。 【效果】四张全宽卡片随滚动依次上滑、贴在视口顶部附近不动，后续卡片从下方滑上来一层层盖住前面的卡；被盖住的卡上缘露出一条 14px 的彩边，最终整副牌像叠起来的桌牌。全程零 JS。 【实现要点】每张卡包在一个高 105vh 的 section 里；卡片 position: sticky，top 基准值由变量控制并按层递增（第 2/3/4 层 top 分别 +14px / +28px / +42px），配不同的 border-top 色；卡片定高（vh + max-height）、圆角、深色渐变底与投影；section 之间不留 margin；overflow:hidden 由卡片自身承担，圆角内裁切。 【参数】CSS 变量：--stack_top:24（首卡贴顶距离 px，每层自动 +14px）、--card_h:62（卡片高度 vh）、--card_radius:16（圆角 px）、--accent:#5e5ce6、--base:#0e0f15。 【验收】滚动时四卡依次贴顶叠放、前卡彩边逐层可见；任何滚动位置卡片标题完整、无文字截断；60fps（sticky 无 JS 参与）；section 间无底色断层；不支持 sticky 的环境退化为普通卡片流且不报错。

请用 HTML + CSS + 原生 JS 实现"缩放滚动（Zoom Scroll）"动效。 【效果】一段 2.8 倍视口高的滚动区里，中央卡片钉在屏幕正中：随滚动进度从约 0.55 倍、微暗的状态平滑放大到 1 倍并完全点亮，像推拉镜头聚焦主体；滚到哪里停在哪里，回滚即时回退。 【实现要点】外层 wrap 定高 280vh，内层 sticky 舞台 100vh 居中卡片；scroll 监听 passive + rAF 合帧，进度 p = clamp((scrollY − wrap.offsetTop) / (wrap.offsetHeight − innerHeight))，先做 smoothstep（p²(3−2p)）柔化，再映射 scale = from + (to − from) × e、opacity = min(1, 0.22 + p × 1.4)，只写 style.transform / style.opacity；起止值从 CSS 变量 --zoom_from / --zoom_to 读取。 【参数】CSS 变量：--zoom_from:0.55（起始缩放）、--zoom_to:1（结束缩放）、--card_bg:#141827（卡面底色）、--accent:#5e5ce6（强调条色）、--base:#0e0f15。 【验收】缩放与滚动严格同步、方向可逆、松手即停；起止两端减速自然无机械感；60fps（transform + opacity）；zoom_from/zoom_to 对调后呈现由近推远且内容始终可读；reduced-motion 下跟随用户滚动、控制台零报错。

请用 HTML + CSS + 原生 JS 实现"混合模式光标（Blend Cursor）"动效。 【效果】双层自定义光标替代系统光标：内层实心圆点紧跟鼠标，外层细环慢半拍拖拽跟随；光标用 mix-blend-mode:difference 混合——深色底上呈白色、扫过浅色区域自动反相成深色、压过彩色块呈补色，全程无需判断底色；悬停可交互元素时外环放大，按下时收缩。 【实现要点】body { cursor:none }；两个 fixed 定位圆（dot 实心、ring 1.5px 描边）都设 mix-blend-mode:difference、pointer-events:none；位置由 CSS 变量 --dx/--dy 经 transform 驱动，rAF 循环里 dot 用 --follow（0.3）、ring 用 --ring_lag（0.14）分别 lerp；mouseenter/mouseleave 到 .chip/.big 上把 --rs 设为 1.6/1，mousedown/up 设 0.72/1（scale 写进 ring 的 transform）；mouseleave 文档时透明度降 0；参数从 CSS 变量 getComputedStyle 读取。 【参数】CSS 变量：--dot_px:14（圆点直径 px）、--ring_px:44（外环直径 px）、--follow:0.3（圆点跟随）、--ring_lag:0.14（外环滞后）、--cursor_color:#ffffff（光标色，difference 下白色即反色器）。 【验收】光标经过亮色板/白色大字/彩色块时分别呈深色/反色/补色，肉眼可辨且无闪烁；外环始终慢于圆点、松手后归位；60fps；离开区域光标淡出；reduced-motion 下跟随即时、无自动演示；控制台零报错。

请用 HTML + CSS + 原生 JS 实现"光标光环（Cursor Glow）"动效。 【效果】一团柔和的环形光晕跟随鼠标移动：光环带惯性地『滑』向光标位置（不瞬移），叠在深色背景上呈发光质感；环中央镂空、只亮环带，扫过文字时像灯光掠过；光标静置约 3 秒后光环自动沿缓动轨迹游走（预览演示），用户一动立即交还控制权。 【实现要点】光环是一个固定尺寸圆形 div，background 为 radial-gradient(closest-side, transparent calc(72% - ring*1%), 光色 72%, transparent calc(72% + ring*1%)) 形成柔边环带，mix-blend-mode:screen；位置由 CSS 变量 --lx/--ly 经 transform: translate(calc(var(--lx)*1px), calc(var(--ly)*1px)) translate(-50%,-50%) 驱动；pointermove 只更新目标点，rAF 循环里 x += (tx-x)*lerp 做线性插值后写回变量（lerp 从 --lerp 读取，约 0.1）；空闲 2.6s 后目标点改走 Lissajous 轨迹自动演示；will-change:transform，pointer-events:none。 【参数】CSS 变量：--glow_color:#8ea6ff（光环颜色）、--glow_px:260（直径 px）、--glow_opacity:0.55（强度）、--ring_pct:14（环带厚度 %）、--lerp:0.1（跟随柔度，越小越绵软）。 【验收】光环连续跟随无跳变、60fps（transform-only）；快速甩动时光环平滑追上；环带中心镂空、边缘柔散不生硬；光环不遮挡文字交互；触屏拖动生效；reduced-motion 下无自动游走、跟随即时，控制台零报错。

请用 HTML + CSS + 原生 JS 实现"拖尾星屑（Cursor Trail）"动效。 【效果】光标移动时沿途撒出发光的小星屑：每颗粒子从光标位置出生，带随机漂移（略微向上飘）边缩小边淡出，快甩时光标后面拖出一串渐隐的尾迹；粒子只增不减会自动清理，画面始终干净。 【实现要点】pointermove 里按『与上次生成点距离 ≥ spawn_px』节流生成粒子（不是每帧生成）；每颗粒子是绝对定位的 i 元素，用 el.animate() 播放两帧关键帧（出生 translate(x,y) scale(s) opacity .95 → 终点 translate(x+dx,y+dy) scale(s*0.12) opacity 0，时长 life_ms、缓出曲线），onfinish/oncancel 里 remove 并把计数减一；并发上限约 72 颗，超限跳过；容器层 pointer-events:none + overflow:hidden。空闲约 3s 后虚拟光标沿正弦轨迹横穿画面自动演示，真实移动立即接管。 【参数】CSS 变量：--trail_color:#a8b8ff（星屑色）、--particle_px:9（尺寸 px）、--life_ms:700（存活时长）、--spawn_px:16（撒布间距 px）、--drift_px:26（漂移幅度 px）、--shape:dot|star（粒子形状，star 用 clip-path）。 【验收】快速甩动拖尾连贯、慢移稀疏自然，60fps；粒子结束后 DOM 节点数回落到 0；原地画圈不会让节点数无限上涨；形状切 star 呈四角星；触屏拖动出粒子；reduced-motion 下完全静止、控制台零报错。

请用纯 HTML + CSS 实现"悬停显卡（Hover Reveal Card）"动效。 【效果】一张卡片默认显示封面（编号、标题、强调条）；悬停时一块信息面板从卡片选定边缘（默认底部）平滑滑入并整面覆盖卡面，展示描述与行动入口；移开后面板原路滑出。也支持切换为从顶部/左/右滑入。 【实现要点】卡片 position:relative + overflow:hidden，宽度用确定值 min(300px, calc(100vw - 56px))（居中 auto 轨道内禁用百分比宽度，子元素全绝对定位时会解析成 0 而塌线）；面板 position:absolute; inset:0 整面覆盖，常态 transform:var(--hide)（如 translateY(102%)），transition 只挂 transform；.card:hover 与 .card:focus-within 时 transform:translate(0,0)；方向切换只改 --hide 一个变量；keyframes 自动演示（body:not(:hover) 时周期滑入滑出）同样引用 var(--hide)，保证方向切换后演示同步；卡片 tabindex=0 提供键盘通道。 【参数】CSS 变量：--dur_ms:460（滑动时长）、--ease:cubic-bezier(0.22,1,0.36,1)、--hide:translateY(102%)（滑出方向，可换 translateY(-102%)/translateX(±102%)）、--panel_bg:#171b2e、--accent:#5e5ce6。 【验收】滑入滑出 60fps、只动 transform；四个方向切换后滑入方向与预期一致且自动演示同步；键盘 Tab 聚焦也能展开；面板整面覆盖、任意帧不露半截文字；reduced-motion 下面板即时切换；控制台零报错。

请用 HTML + CSS + 原生 JS 实现"磁吸下划线（Magnetic Underline）"动效。 【效果】一组导航链接的下划线有方向记忆：从左边进入链接，线从左端向右生长；向右离开，线向右端收缩退场——线始终『跟着光标的来去方向』；从上下进入时线从中心展开。光标静置约 3 秒后自动轮流演示各链接，真实移动立即接管。 【实现要点】链接 ::after 为底部 2px 细线，常态 scaleX(0)、hover/focus 时 scaleX(1)，transform-origin 取自 CSS 变量 --origin（默认 50% 50%）；JS 在 mouseenter/mouseleave 里用 getBoundingClientRect 中点比较 dx/dy（绝对值大者定边），把 origin 写成 0% 50% / 100% 50% / 50% 50% 后再让 hover 状态生效——离开时先更新 origin 再移除 hover，浏览器统一重算后收缩方向即指向离开边；过渡只挂 transform。 【参数】CSS 变量：--line_color:#8ea6ff（线色）、--line_px:2（粗细 px）、--dur_ms:300（时长）、--ease:cubic-bezier(0.22,1,0.36,1)、--text_color:#c9cfe2（文字色）。 【验收】从四条边进入链接，生长方向分别为左端/右端/中心/中心且无跳帧；进入与离开方向独立正确（左进右出最典型）；60fps；键盘 focus 也有下划线与描边；reduced-motion 下无自动演示、控制台零报错。

请用 HTML + CSS + 原生 JS 实现"磁吸按钮（Magnetic Button）"动效。 【效果】圆形按钮像被磁铁吸引：光标进入作用半径后按钮被『吸』向光标方向（位移量 = 偏移 × 吸附强度），内部文字以约 0.45 倍幅度视差跟随；光标离开半径或区域后，按钮以带过冲的缓动弹回原位。 【实现要点】按钮外层放一个不做变形的槽位 div，吸附中心取槽位的 getBoundingClientRect 中心（不能用按钮变形后的 rect，否则振荡）；在容器上监听 mousemove，算出光标到中心的 dx/dy 与距离，距离小于 --radius_px 时设置 transform:translate(dx*strength, dy*strength) 并切换 90ms 短过渡，否则与 mouseleave 时回弹（--return_ms + 过冲曲线）；JS 参数从 CSS 变量读取（getComputedStyle）；全程只动 transform。 【参数】CSS 变量：--strength:0.4（吸附强度 0.05-1）、--radius_px:200（作用半径）、--return_ms:400（回弹时长）、--ease:cubic-bezier(0.34,1.8,0.4,1)（回弹曲线）、--btn_bg:#141828、--btn_text:#f2f3f8。 【验收】吸放过程 60fps 无抖动（特别是半径边界反复横跳时不振荡）；松手回弹有一次过冲；参数 strength=1 时按钮贴住光标、0.05 时几乎不动；触屏设备上静态可用不报错。

请用 HTML + CSS + 原生 JS 实现"磁吸列表（Magnetic List）"动效。 【效果】一组列表行像有磁力：光标纵向扫过时，靠近的行被水平『吸』向光标一侧并微微提亮，越近位移越大（smoothstep 衰减，进出作用半径无跳变），远处的行保持原位；光标离开后所有行平滑归位。静置约 3 秒后虚拟光标自动沿列表游走演示，真实移动立即接管。 【实现要点】初始化一次性缓存列表矩形与每行中心 Y（resize 重测）；rAF 循环里对每行算 influence = smoothstep(1 - |cursorY - rowCenterY| / radius)，横向目标位移 = clamp((cursorX - listCenterX)/half, -1, 1) × max_shift × influence，当前值 lerp 后写 translate3d；同时按 influence 把行 opacity 从 0.72 提到 1；参数从 CSS 变量 getComputedStyle 读取；全程只写 transform/opacity。 【参数】CSS 变量：--radius_px:150（作用半径）、--max_shift_px:30（最大位移 px）、--lerp:0.16（跟随柔度）、--row_bg:#131826（行底色）、--accent:#7f9cff（强调色）。 【验收】行位移方向与光标横向位置一致、半径边界无抖动，60fps；只有被扫过的行位移且间距布局不变（transform 不影响文档流）；移开后全部归位；reduced-motion 下列表完全静态；控制台零报错。

请用 HTML + CSS + 原生 JS 实现"聚光文字（Spotlight Text）"动效。 【效果】深色页面上两行文字几乎隐入背景，只余极淡轮廓；鼠标像手电筒一样照亮文字——光斑半径内的字被点亮成亮色、边缘羽化过渡回暗色；光斑带一点惯性跟随光标，静置约 3 秒后自动游走演示，用户一动立即交还。 【实现要点】文字元素 background-image 为 radial-gradient(circle <spot>px at calc(var(--mx)*1px) calc(var(--my)*1px), 亮色 0%, 暗色 <feather>%)，配 background-clip:text（含 -webkit- 前缀）+ color:transparent；JS 在 rAF 循环里把光标坐标 lerp（约 0.12）后换算成每个 .lit 元素盒的局部坐标，分别 setProperty --mx/--my（元素各自 rect）；resize 重测 rect；空闲 2.6s 后目标点走 Lissajous 轨迹；@supports 不支持 clip:text 时回退纯色。 【参数】CSS 变量：--lit_color:#f4f6ff（照亮字色）、--dim_color:#2a2f42（暗态字色）、--spot_px:190（光斑半径 px）、--feather_pct:65（羽化位置 %）。 【验收】光斑跟随连续、边缘羽化无硬边，60fps；标题与副标题同时被一束光照亮（光斑跨元素连续）；暗态下文字轮廓依稀可读（非纯黑）；不支持 background-clip:text 的环境显示纯色文字；reduced-motion 下无自动游走、控制台零报错。

请用 HTML + CSS + 原生 JS 实现"文字避让（Text Repel）"动效。 【效果】一行大标题的字符像有生命一样躲开鼠标：光标靠近时，附近的字符被推向四周（越近推得越远，呈平方衰减），字符颜色同时从静息色渐变到强调色；光标离开后字符带着惯性缓动归位。光标静置约 3 秒后由虚拟光标自动扫过文字演示，真实移动立即接管。 【实现要点】JS 把标题 textContent 拆成 inline-block span（white-space:pre 保留空格），初始化时一次性缓存每个字符中心点（resize 重测）；rAF 循环里对每个字符算 dist 与方向，d < radius 时 offset = 方向 × strength × (1-d/r)²，否则回 0；当前位移用 x += (target-x)*lerp 平滑后写 translate3d；颜色按位移/strength 的比例在两个 RGB 之间插值（hex/rgb 均可解析），变化超 0.02 才写 style.color；参数全部从 CSS 变量 getComputedStyle 读取。 【参数】CSS 变量：--radius_px:120（作用半径）、--strength_px:34（最大让位距离 px）、--lerp:0.18（跟随柔度）、--text_color:#e8ebf5（静息字色）、--push_color:#7f9cff（让位字色）。 【验收】字符位移方向始终背离光标、连续无跳变，60fps；光标悬在字符正上方时位移不超过 --strength_px；移开后字符平滑回正、字色还原；reduced-motion 下文字完全静态；控制台零报错。

请用 HTML + CSS + 原生 JS 实现"3D 倾斜卡片（Tilt Card）"动效。 【效果】鼠标在卡片上移动时，卡片向光标方向轻微倾斜（最大约 12 度，光标所在一侧抬起），卡面内容与强调元素以不同 translateZ 深度产生视差，同时一道透明度不超过 5% 的白色单色柔光始终跟随光标位置；移开后卡片平滑回正、柔光回到中心。 【实现要点】外层容器设 perspective（如 900px），卡片 transform-style:preserve-3d 且不要设 overflow:hidden；mousemove 里把光标位置归一化为 px/py（0-1），rotateX = (py-0.5)*2*max、rotateY = (0.5-px)*2*max；跟随用 60ms 线性过渡、离开用 220ms cubic-bezier 回正；柔光层用 radial-gradient(circle at var(--gx) var(--gy))，渐变峰值 alpha 控制在 0.14 左右、叠加 opacity 后实际 ≤5%，JS setProperty 更新圆心；内容层 translateZ(30px) 做视差。 【参数】CSS 变量：--max_tilt:12（最大倾角 deg）、--perspective:900（透视距离 px）、--glare_opacity:0.3（柔光强度 0-0.35，渲染峰值 ≤5%）、--dur_ms:220（回正时长）、--card_bg:#12141d、--accent:#5e5ce6。 【验收】倾斜方向与光标位置一致、连续无跳变；60fps；柔光克制不过曝（峰值透明度 ≤5%）；perspective 参数从 400 到 1600 观感从夸张到平缓连续变化；不设 overflow:hidden 的前提下卡面圆角完整；触屏设备降级为静态不报错。

请用纯 HTML + CSS 实现"3D 折叠面板（3D Accordion）"动效。 【效果】一组手风琴面板：点击或悬停标题时，内容区像一页纸绕顶部铰链翻开（rotateX 从约 84 度折叠角转到 0 度），同时裁切高度展开；已展开项点击另一项时自动收起（单选持久）；chevron 随状态旋转；全程有透视体积感。 【实现要点】结构为 隐藏 radio + item（label 头部 + .item__clip 裁切层 + .item__body 内容层）兄弟相邻，用 #id:checked + .item 选中；.acc 容器设 perspective:900px；.item__clip { max-height:0; overflow:hidden; transition:max-height } 打开时到 var(--body_max_px)；.item__body { transform-origin:50% 0; transform:rotateX(calc(var(--fold_deg)*-1deg)); transition:transform } 打开时 rotateX(0)；.item:hover 提供同样的展开规则；radio 视觉隐藏但保留可聚焦；body:not(:hover) + 未选中项跑一组同周期 keyframes 自动演示。 【参数】CSS 变量：--dur_ms:560（展开时长）、--ease:cubic-bezier(0.22,1,0.36,1)、--fold_deg:84（折叠角 deg）、--body_max_px:150（内容高度上限 px）、--accent:#7e9cff。 【验收】展开收起连贯、rotateX 与高度同步不穿帮；单选互斥且方向键可切换、Tab 可聚焦；内容超过上限会被裁切（参数内自担）；reduced-motion 即时显示；控制台零报错。

请用纯 HTML + CSS 实现"3D 按压卡片（3D Press Card）"动效。 【效果】一张卡片像实体按键：悬停时微微向反方向抬起预告可按；按下（:active）时绕铰链边（默认底边）下沉微倾约 10 度并轻微缩小、落影收浅变近；松手后以带一次过冲的弹性曲线回弹到原位。整个过程有真实透视感。 【实现要点】stage 设 perspective:900px；卡片 preserve-3d + will-change:transform + transform-origin:var(--origin)；常态 transition: transform var(--return_ms) var(--ease)（过冲曲线），:active 里覆盖为 transform: rotateX(calc(var(--press_tilt)*1deg)) scale(var(--press_scale)) 且 transition-duration 切到 --press_ms、timing 换 ease-out；悬停态给 -0.3 倍倾角的反向预抬；内容元素分别 translateZ 形成深度视差；box-shadow 随状态同步变化；keyframes 演示（body:not(:hover)）复用同一组变量。 【参数】CSS 变量：--press_tilt:10（倾角 deg）、--press_scale:0.96（按压缩放）、--press_ms:110（按下时长）、--return_ms:520（回弹时长）、--ease:cubic-bezier(0.34,1.56,0.64,1)（回弹曲线）、--origin:50% 100%（铰链边，可换 50% 0% / 50% 50%）。 【验收】按下即时响应（≤110ms）、松手恰好一次过冲不过分弹跳；60fps、只动 transform/box-shadow；切铰链边到顶边/中心后倾斜方向正确；键盘 Tab 有可见焦点描边；reduced-motion 下静止；控制台零报错。

请用纯 HTML + CSS 实现"旋转立方体（Rotating Cube）"动效。 【效果】一个六面立方体绕纵轴匀速自转并带固定俯视角：面为半透明深色底 + 亮色棱线，能透视看到背面的棱线形成线框感；悬停时自转暂停（不重启），移开继续；面上的编号随面一起转动。 【实现要点】外层 .scene 设 perspective:900px；.cube 宽高 = var(--size_px)px、transform-style:preserve-3d、will-change:transform，animation 匀速 rotateX(-22deg) rotateY(0→360deg)；六个面 absolute inset:0，分别 rotateY(0/90/180/-90) 或 rotateX(±90) 后 translateZ(calc(var(--size_px)/2*1px))；面背景半透明 + 1px 棱线描边，不加 backface-visibility:hidden；悬停 .scene:hover .cube { animation-play-state:paused }；场景框留 2 倍边长防溢出。 【参数】CSS 变量：--size_px:120（边长 px）、--dur_s:14（自转周期 s）、--face_bg:#151b31（面底色）、--face_opacity:0.86（面透明度）、--edge_color:#3d4c86（棱线色）。 【验收】六面拼合无缝、自转 60fps 无闪面；透视近大远小自然；悬停立即暂停且从当前角度继续（不跳回起点）；--size_px 从 84 到 160 六面始终对齐；reduced-motion 下为静置姿态；控制台零报错。

请用 HTML + CSS + 原生 JS 实现"进深轮播（Depth Carousel）"动效。 【效果】一个 3D 舞台上的环形轮播：当前卡在最前排（translateZ 最大、全亮带描边），左右两张各带 26° 侧偏角半透明退到后方，正后方一张更暗更远，其余隐没；切换时所有卡同时沿 3D 轨道滑到相邻槽位，形成前后景穿梭感。支持按钮、点击侧卡、方向键；空闲约 3 秒自动前进。 【实现要点】viewport 设 perspective:1100px + overflow:hidden，track preserve-3d；卡片 absolute 居中（负 margin），transition: transform+opacity；JS 维护 cur 索引，对每张卡算 slot=(i-cur+n)%n，按槽位表写 transform（前 translateZ(depth)，侧 translateX(±spread) translateZ(-depth*0.3) rotateY(∓26deg)，后 translateZ(-depth*1.15)，其余 scale(0.7) 隐没）与 opacity（1/0.55/0.18/0）；active 卡加描边；键盘在 viewport 上监听 ArrowLeft/Right。 【参数】CSS 变量：--dur_ms:650（切换时长）、--ease:cubic-bezier(0.22,1,0.36,1)、--depth_px:150（前排进深 px）、--spread_px:150（两侧展开 px）、--accent:#7f9cff。 【验收】切换 60fps、卡片沿弧线滑动不穿模（后排先让位）；首尾循环无跳变；点击任意侧卡直达并重排槽位；方向键可用；reduced-motion 无自动播放；控制台零报错。

请用纯 HTML + CSS 实现"3D 翻转卡片（Flip Card）"动效。 【效果】一张卡片悬停时绕纵轴 3D 翻转 180 度显示背面：正面是深色内容面，背面用另一底色与文案区分；翻转过程有真实的透视缩放感（边缘近大远小），松开后翻回正面；也可切换为上下翻转。 【实现要点】容器设 perspective:1000px；翻转层 transform-style:preserve-3d + transition:transform；两个 face 绝对定位 inset:0、backface-visibility:hidden（含 -webkit- 前缀）、圆角一致；背面 face 预置 transform:rotateY(180deg)（与主翻转轴同一个变量）；hover 时翻转层 transform:rotateY(180deg)。 【参数】CSS 变量：--dur_ms:800（翻转时长）、--ease:cubic-bezier(0.4,0.1,0.2,1)、--radius_px:14、--face_front:#141724、--face_back:#171d31、--flip:rotateY(180deg)（轴向，可换 rotateX(180deg)）。 【验收】翻转全程两面内容不穿透、不露镜像；透视感自然（卡片有近大远小）；轴向切到 rotateX 时背面预旋转同步变化且效果正确；60fps；reduced-motion 下内容即时切换；触屏按住可翻面。

请用纯 HTML + CSS 实现"翻页转场（Page Turn）"动效。 【效果】一本摊开的书：悬停时右侧当前页绕书脊（左边缘）翻起、越过中缝落 到左侧，露出下一页——像真实翻书，有近大远小的透视和纸页阴影；翻页两面都有内容（正面是章节页、背面是接排页），任意角度不露空白；移开后翻回。 【实现要点】stage 设 perspective:1400px；.flipper（右半宽、transform-origin:left center、preserve-3d、will-change:transform）含两个 absolute inset:0 的面：front 常规、back 预置 rotateY(180deg)，两面 backface-visibility:hidden + 圆角与对应页一致；.book:hover .flipper { transform:rotateY(-180deg) }，transition 只挂 transform；中缝用叠在最上的渐变 .spine，书本用 drop-shadow 落影；body:not(:hover) 时 keyframes 以 8s 周期自动翻回演示。 【参数】CSS 变量：--dur_ms:900（翻页时长）、--ease:cubic-bezier(0.35,0.1,0.25,1)、--page_bg:#f5f2ea（纸页色）、--ink:#2f2d3a（墨色）、--accent:#5e5ce6（章节编号强调色）。 【验收】翻页全程两面内容不穿透、不露镜像或空白；翻落终点与左页严丝合缝（无错位、无闪缝）；透视自然（远端微缩）；60fps、只动 transform；reduced-motion 瞬时切换；控制台零报错。

请用 HTML + CSS + 原生 JS 实现"视差 3D 场景（Parallax Tilt Scene）"动效。 【效果】一个 perspective 容器里的多层微缩场景（网格背景、两块浮板、中央卡片、两团前景光斑）：鼠标移动时整个场景轻微倾斜（最大约 9 度），不同深度的元素因 translateZ 差异自动产生大小不一的位移——近处光斑大幅漂移、背景网格缓慢滑动，形成物理感视差；移开回正，静置约 3 秒后自动环视演示。 【实现要点】.scene 宽度用确定值 min(400px, calc(100vw - 56px))（居中 auto 轨道内禁用百分比宽度，子元素全绝对定位时会解析成 0 而塌线），并设 perspective（var 驱动）+ overflow:hidden（裁切必须在这一层，preserve-3d 的 .world 不能设 overflow）；.world preserve-3d + will-change:transform，JS 每帧写 rotateX/rotateY（指针在场景内归一化到 [-1,1]，tx=-py*2*tilt_max, ty=px*2*tilt_max，lerp 后写入）；场景元素各设 translateZ(calc(N px * var(--z_mult))) 拉开 -240 到 +190px 的深度；grid 用两层 linear-gradient 网格、orbs 用径向渐变+opacity。 【参数】CSS 变量：--tilt_max:9（最大倾角 deg）、--perspective:1000（透视距离 px）、--lerp:0.1（跟随柔度）、--z_mult:1（深度倍率）、--accent:#8ea6ff。 【验收】倾斜方向与光标一致、连续无跳变，60fps（world 单一 transform）；z_mult 从 0.4 到 1.8 视差幅度平滑缩放且元素不溢出裁切框；网格/浮板/卡片/光斑六个深度层级清晰可辨；reduced-motion 静止；控制台零报错。

请用 HTML + CSS + 原生 JS 实现"3D 粒子球（Particle Sphere）"动效，不使用 three.js 或 WebGL。 【效果】一颗由发光小圆点组成的 3D 球体缓慢自转，同时整体带 ±14 度的俯仰摆动（陀螺感）；近处的点因透视显得更大更亮、远处的缩小，形成通透的点云立体感；悬停暂停，任意角度都均匀无缝隙。 【实现要点】JS 用斐波那契球面分布生成 N 个点：y = 1 - 2*(i+0.5)/N，lat = asin(y)，lon = i × 黄金角（2.39996 rad），每点 transform = rotateY(lon rad) rotateX(lat rad) translateZ(radius px)，一次性 DocumentFragment 插入；容器两层嵌套 preserve-3d：外层 wobble 动画 rotateX(-14deg ↔ 14deg) alternate，内层 sphere 动画 rotateY(0→360deg) linear infinite；scene 设 perspective:820px；点为负 margin 居中的小圆 + box-shadow 发光；参数 count/radius 从 CSS 变量读取。 【参数】CSS 变量：--radius_px:110（球半径 px）、--count:72（粒子数）、--dot_px:4（粒子尺寸 px）、--dur_s:18（自转周期 s）、--dot_color:#9db4ff。 【验收】球面任意角度无聚集条纹（斐波那契分布生效）；自转+摆动 60fps（CSS 动画合成器路径）；点近大远小透视正确；--count 改到 160 仍流畅；悬停暂停不重启；reduced-motion 静态姿态完整；控制台零报错。