如何利用HTML制作简易幻灯片_通过CSS animation延迟效果-html教程-PHP中文网

纯 CSS 幻灯片的关键在于时序控制：需精确匹配 animation-duration 与关键帧百分比，禁用 ease 类缓动，统一动画而非为每张图设 delay，优先用 transform: translateX() 替代 opacity，配合 will-change 和 radio 控制实现轻量可靠轮播。

如何利用html制作简易幻灯片_通过css animation延迟效果

纯 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 动画有渲染残留（白边、闪帧），尤其在低配设备上。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

推荐方案：所有幻灯片水平排列，父容器 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