答案：通过CSS的animation与opacity属性实现轮播图淡入淡出效果，利用绝对定位将多张图片叠放在同一位置，结合@keyframes定义透明度变化动画，设置每张图在特定时间段内opacity为1、其余为0，并通过animation-delay错开播放时机，实现平滑过渡。以3张图为例，总周期9秒，每张停留3秒，关键帧控制显示区间避免重叠，配合ease-in-out缓动和交叉溶解优化视觉体验，同时使用will-change提升性能，适用于轻量级、静态内容轮播场景。
实现轮播图的淡入淡出效果，可以通过CSS的animation和opacity属性来完成。这种方法无需JavaScript即可让图片轮流显示并带有平滑过渡，适合轻量级轮播需求。
基本原理：利用opacity控制透明度
轮播图的核心是让多张图片在同一个位置依次显示。通过设置opacity从0（完全透明）到1（完全不透明），结合@keyframes定义动画，就能实现渐隐渐显效果。
关键点：
- 所有图片绝对定位在同一位置
- 每张图在特定时间段内opacity为1，其余时间为0
- 动画循环播放，时间分配均匀
CSS动画关键帧设置
假设轮播有3张图，每张停留3秒，总周期9秒。使用@keyframes定义每个阶段的透明度变化：
立即学习“前端免费学习笔记（深入）”；
@keyframes fade { 0%, 33.33% { opacity: 1; } 36.33%, 66.66% { opacity: 0; } 69.66%, 100% { opacity: 0; } }上面规则表示：
- 第一张图：0% ~ 33.33% 显示
- 第二张图：36.33% ~ 66.66% 显示（延迟开始避免重叠）
- 第三张图：69.66% ~ 100% 显示
HTML结构与样式设置
结构简单清晰，用一个容器包裹所有图片：
<div class="carousel"> <img src="img1.jpg" class="slide" style="animation-delay: 0s;"> <img src="img2.jpg" class="slide" style="animation-delay: -3s;"> <img src="img3.jpg" class="slide" style="animation-delay: -6s;"> </div>CSS样式示例：
.carousel { position: relative; width: 600px; height: 400px; overflow: hidden; } .slide { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: fade 9s infinite; }注意animation-delay用于错开每张图的动画起始时间，确保依次播放。
优化细节提升体验
为了让过渡更自然，可加入缓动函数和交叉淡入效果：
- 使用
animation-timing-function: ease-in-out;使淡入淡出更柔和 - 调整keyframes中透明度切换区间，让前后图片短暂叠加，实现“交叉溶解”效果
- 添加
will-change: opacity;提升动画性能
基本上就这些。纯CSS实现简单高效，适合静态内容轮播，维护成本低且兼容性好。不复杂但容易忽略的是时间计算和延迟匹配，只要节奏对上，效果就很流畅。
