纯 CSS 幻灯片的关键在于时序控制：需精确匹配 animation-duration 与关键帧百分比，禁用 ease 类缓动，统一动画而非为每张图设 delay，优先用 transform: translateX() 替代 opacity，配合 will-change 和 radio 控制实现轻量可靠轮播。
纯 CSS 能做出可靠、轻量、无 JS 依赖的幻灯片，关键不在“怎么动”，而在“怎么控时序”——animation-delay 是轮播节奏的锚点，但直接设它容易翻车。
为什么幻灯片总卡在第一张？检查 animation-duration 和关键帧分布
常见现象：幻灯片只显示第一张，后续不切换；或所有图同时淡出，没过渡。
- 根本原因是
animation-duration和关键帧百分比没对齐。比如 4 张图，总时长设为12s，那每张应占3s，对应关键帧节点必须是0%、25%、50%、75%、100% - 别用
ease类函数做轮播切换——它会让 opacity 或 transform 在首尾减速，造成“停顿感”，视觉上像卡住；改用steps(1, end)或linear - 如果用
opacity控制显隐，务必加animation-fill-mode: forwards，否则动画一结束就回退到初始透明度
多图轮播时，animation-delay 不是用来“错开启动”的
animation-delay 在幻灯片里不是给每张图单独设延迟值，而是整个动画序列的统一偏移起点。设错会导致整套轮播错相位。
- 错误做法：
.slide:nth-child(1) { animation-delay: 0s; }、.slide:nth-child(2) { animation-delay: 3s; }……这会让每张图各自跑自己的动画，不同步、不可控 - 正确做法：所有幻灯片元素共用同一动画（如
slide-show），只设一次animation-duration和animation-iteration-count: infinite，靠关键帧内百分比控制每张图的显隐区间 - 若真要“错开入场”（比如首屏多个幻灯片区块依次滑入），才对容器设不同
animation-delay；轮播本身不需要
用 transform: translateX() 替代 opacity 切换更稳
iOS Safari 和部分安卓 WebView 对连续 opacity 动画有渲染残留（白边、闪帧），尤其在低配设备上。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：所有幻灯片水平排列，父容器
overflow: hidden，用transform: translateX(-N%)移动视口 - 每张图宽度设为
100%，父容器总宽为N * 100%（N 为图数），第 2 张对应translateX(-100%)，第 3 张对应translateX(-200%) - 必须加
will-change: transform，提前告知浏览器该属性将频繁变化，避免每次重排 - 别混用
opacity和translateX()做“淡入+滑动”——两者插值节奏难对齐，容易错层
radio 控制手动切换时，checked ~ 选择器别写漏
用原生 input[type="radio"] 实现点击切换最轻量，但结构稍不严谨就失效。
-
input必须同名（如name="slider"），否则无法互斥；checked属性只能有一个生效 - 选择器必须写成
input#slide1:checked ~ .slides > .slide:nth-of-type(1)这类精确路径，不能只靠:checked + .slide——因为input和幻灯片不在相邻兄弟关系中 -
input别用display: none隐藏，屏幕阅读器可能跳过；改用position: absolute; left: -9999px - 默认显示第 N 张？直接给第 N 个
input加checked属性即可，无需 JS
真正麻烦的不是写出能动的幻灯片，而是当你要支持“滚动触发动画”“响应式缩放”“用户暂停/快进”时，animation-play-state 和 JS 的衔接点很容易被忽略——这时候 CSS 动画就不再是“设完就完事”，而成了状态机的一部分。
