霓虹玻璃卡片翻转动效

霓虹玻璃卡片依次翻转，鼠标移入后跟随位置变化，移出继续播放。

复刻提示词

用 HTML、CSS、JavaScript 实现一排霓虹玻璃卡片依次翻转的背景动效。无需图片、视频或外部依赖，交付一个保存为 index.html 即可运行的完整示例。只生成卡片背景和必要的播放控制，不添加网页文案、Logo、图形纹理或贯穿场景的光束。

1. 构图与玻璃结构
背景 #080808。使用 1280 × 600 的参考场景，12 张卡片沿水平方向排列，整体居中。每张卡片宽 146px、高 360px、厚 8px、圆角 10px；水平间距 116px，第一张左侧坐标 -71px，卡片顶部 y = 120px。整组按 min(容器宽 / 1280, 容器高 / 600) 等比缩放，不改变卡片比例和间距，不推动周围布局。
每张卡片绕自身中心纵轴翻转，透视距离 1800px。构建真实分离的正反面、上下左右侧壁和圆角侧壁；正反面分别位于 z = ±4px，背面额外旋转 180°，隐藏不可见背面。四个圆角各用 6 段侧壁连续连接，不用一根发光线冒充厚度。
保持旋转容器的 preserve-3d。不要在旋转容器或透视父级上设置会压平三维结构的 filter、opacity 或 overflow:hidden；模糊只用于独立光晕层，正反面分别裁切圆角。

2. 依次翻转与循环
共用一条 8400ms 时间轴，前后半轮各 4200ms。前半轮从左到右，卡片从 0° 翻转到 -180°；后半轮从右到左，从 -180° 翻回 0°。各卡片错开 250ms，单张翻转持续 1350ms。开始和结束时卡片仍在固定位置，不进行平移、缩放或更换元素。
将每张卡片的本轮局部时间归一化并限制在 0～1，使用 p = (1 − cos(πq)) / 2 缓入缓出，再用 p 插值角度。前半轮延迟为 index × 250ms，后半轮为 (11 − index) × 250ms。按真实经过时间计算，循环首尾角度与光照连续，不使用逐帧随机值或互不相关的定时器。

3. 霓虹玻璃与侧面通透感
正面接近平视时是低亮度深蓝玻璃；翻转时逐渐出现上方青色／蓝色、中间蓝紫色、下方洋红色的霓虹渐变，并有柔和外溢光晕。保留黑色背景和卡片之间的暗部，不把整个场景照成灰色。
建立所有卡片共享的场景光源：左侧电蓝、上方青色与蓝紫、右下方洋红，以及两侧柔和反光。根据每张卡片的位置、表面法线、视线、距离和相邻玻璃遮挡，计算表面着色和局部反射；不要把相同渐变贴到每张卡片上。颜色应饱和，避免曝光后泛白发灰。
侧面使用自己的外向法线计算反光，随翻转连续变化。厚度保持 8px，呈现浅色细边高光、半透明的浅青／淡紫折射色和克制的内部二次反光；不画暗芯、不填实色金属条、不增加厚重描边。圆角侧面与直边连续。这里只需轻量的玻璃光照近似，不要求光线追踪。

4. 鼠标跟随与播放控制
默认自动播放。鼠标进入整排卡片的矩形区域（场景 x = 0～1280、y = 120～480，包括卡片间隙）后，暂停自动推进，按鼠标的横向位置控制翻转进度，而不是拖动卡片位置。
卡片交互区域始终保持默认箭头指针，悬停或移动时不切换指针造型。
进入时保留当前所处的前／后半轮；横向位置 u 限制在 0～1，前半轮目标时间为 u × 4200ms，后半轮为 8400 − u × 4200ms。用 a = 1 − exp(−dt / 110ms) 平滑追随目标时间，避免进入或反向移动时瞬跳；鼠标停住后画面保持当前位置。移出后从实际停留时间继续自动播放，不重播、不重置顺序。若原本手动暂停，移出后仍保持暂停。
触屏在卡片区域横向拖动控制同一时间轴，松手恢复此前播放状态；保留页面纵向滚动。提供播放／暂停图标、重播图标、进度条与时间，所有控制使用同一时间轴，拖动进度条后暂停播放。

5. 稳定性与验收
容器变化时整组等比缩放；后台、滚出可见区域或 iOS 宿主暂停时冻结时间，恢复后不补跳。减少动态效果模式显示静态初始画面，停止自动播放和指针跟随；销毁预览时清理帧循环、监听和观察器。
鼠标静止且画面追随到位后停止帧循环，移动时重新唤醒，不能累计静止期间的时间。复用姿态数组、侧壁计算容器和元素引用；只写入发生变化的样式。侧壁按自身角度复用结果，正反面还必须检查邻片遮挡变化，不能漏掉阴影更新。每个面只缓存最近一次光照结果，不缓存整段动画。仅在动画运行时启用 will-change 提示；暂停、离屏、鼠标静止后撤销，光晕为零时不绘制光晕层。释放预览时清空缓存与卡片节点。
验收正面、接近 90° 的玻璃侧面、正反翻转、循环接缝、鼠标快速左右移动及移出接续。不能出现侧壁缺失、实心暗条、正反面穿插、突然闪烁、布局跳动或整排统一翻转。

动画源代码

会员解锁后可查看并复制完整 Web / Swift 源码。

<!-- # 保存为 index.html 后打开；无需图片或联网，鼠标移入控制翻转，触屏横向拖动。 -->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="dark">
<title>霓虹玻璃卡片翻转动效</title>
<!-- Shared renderer with the article preview.
     12 panes, 146 x 360px, 8px depth, 10px rounded corners.
     One 8.4-second clock; fixed geometry, shared scene lights.
     Clear edges: no dark core, textures, images, or crossing beam.
     Mouse hover seeks smoothly; exit resumes the previous playback state.
     Touch drag seeks; vertical page scrolling remains available.
     Reduced motion is static. All rendering runs locally.
     Glass lighting is an approximation, not a physical path tracer. -->
<style>
body { margin:0; background:#080808; font-family:system-ui,sans-serif; }
main { max-width:1280px; margin:auto; }
button,input { font:inherit; }