用途:为赌场类游戏 UI 设计可上线的 CSS 动画系统,重点处理回合切换、回合间动效循环与轻量背景效果。动效以纯 CSS 编写后录屏呈现,视觉节奏靠离散步进与网格图案变化实现。
主要能力:基于 steps(n) 的图案动画,配合 repeating-linear-gradient 做扫描、条纹、条形码效果;用数字序列(0–3 或 0–4)编码状态并映射到调色板偏移,通过 CSS 变量驱动 background-position 或 filter;微循环组合,用 400–1400ms 短循环叠加,优先两个短循环而非一个长循环;调色板编排,2–4 个色调,最深色与游戏背景对齐;节奏门控,插入重复状态索引的“安静”步,并把循环激活限制在低注意力状态(空闲、回合间、加载)。
使用方式:先定义动效意图与位置(回合间、空闲、加载、胜利过渡)及可触发/取消的玩家状态;再把视觉节奏转成图案语法(网格尺寸、调色板、序列编码、steps 数量);然后构建 CSS 动效层,用 CSS 变量控制调色板与速度,优先 transform 与 opacity;最后做性能与安全校验,提供 prefers-reduced-motion 回退,确保不遮挡关键 UI。交付物包括动效简报、图案语法、关键帧与类名、集成计划、校验与残余风险。
配方示例:回合间条形码扫过(.interRoundSweep)、回合过渡脉冲(.roundPulse)、空闲火花网格(.idleSparkGrid)、胜利强调扫描(.winAccentScan)、卷轴遮罩抖动(.reelMaskFlutter)、纯 CSS 加载轨道(.loadingOrbit)。
校验命令:python3 scripts/validate_css_motion_spec.py --input <path/to/css_motion_spec.json>,非零退出视为阻塞问题。
限制:动效需保持确定性且短,关键路径避免影响布局的属性;必须提供 reduced-motion 变体;播放时不得遮挡或阻断关键游戏信息。具体平台、收费与效果数据暂未提供。