使用CSS transform和@keyframes结合translateX可实现无JavaScript的图片轮播滑动效果。1. HTML结构采用flex布局将多张图片水平排列，外层容器设置overflow: hidden形成可视窗口；2. CSS中通过animation调用@keyframes定义的位移动画，按时间点依次应用translateX(-25%、-50%等)实现逐图位移；3. 关键帧分0%到100%，每25%对应一张图的切换，配合8s无限循环动画达成自动播放；4. 可添加ease-in-out缓动提升流畅度，复制首图至末尾或调整关键帧时序可逼近无缝循环。该方法依赖纯CSS，性能优异，适用于静态内容轮播，需注意统一图片尺寸与容器适配。
图片轮播滑动效果可以通过CSS的 transform 和 @keyframes 配合 translateX 实现，无需JavaScript也能做出平滑自动播放的动画。核心思路是利用关键帧定义位移变化，再通过 transform 改变图片容器的位置来实现滑动视觉效果。
1. 基本结构：HTML布局
轮播图通常使用一个外层容器包裹多张图片，并将所有图片水平排列在一行中：
<div class="carousel"><img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
2. CSS样式设置容器与图片
让图片横向排列并隐藏溢出部分，形成“滑动窗口”效果：
.carousel {display: flex;
width: 400%; /* 四张图占四倍宽度 */
height: 300px;
animation: slide 8s infinite alternate;
}
.carousel img {
width: 25%; / 每张图占容器1/4 /
height: 100%;
object-fit: cover;
}
/ 外层容器控制可视区域 /
.car-container {
width: 100%;
overflow: hidden;
}
3. 使用 @keyframes 定义 translateX 动画
通过关键帧改变 transform: translateX() 的值，使图片组从左向右或循环滑动：
立即学习“前端免费学习笔记（深入）”；
@keyframes slide {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
75% {
transform: translateX(-75%);
}
100% {
transform: translateX(-100%);
}
}
上面的关键帧表示：每25%时间点移动一张图的宽度（-25%, -50%...），从而实现连续滑动。animation 设置为 8s 表示一轮切换耗时8秒，infinite 表示无限循环。
4. 可选优化：缓动函数与无缝衔接
为了让滑动更自然，可以添加 ease-in-out 或自定义贝塞尔曲线：
animation: slide 8s ease-in-out infinite;若想实现真正无缝循环（最后一张接第一张），建议复制第一张图放在末尾，或使用JS控制。纯CSS方案可通过调整 keyframes 时间分布模拟接近无缝的效果。
基本上就这些。用 transform 结合 @keyframes 能高效实现自动滑动轮播，性能好且代码简洁，适合静态展示场景。注意图片尺寸统一和容器溢出隐藏，就能稳定运行。
