如何在CSS中实现轮播图自动播放动画_利用CSS animation和transform translateX制作自动轮播

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中实现轮播图自动播放动画_利用CSS animation和transform translateX制作自动轮播

2025-11-25

浏览次数：次

返回列表

答案：通过CSS的animation和transform: translateX实现轮播图自动播放，利用flex布局让图片并排，结合@keyframes定义移动关键帧，设置无限循环动画，每8秒切换四张图，通过overflow隐藏超出部分，形成平滑过渡的轮播效果。

如何在css中实现轮播图自动播放动画_利用css animation和transform translatex制作自动轮播

实现轮播图的自动播放，可以通过纯 CSS 的 animation 和 transform: translateX 来完成，无需 J*aScript。这种方式轻量、高效，适合静态页面或对性能要求较高的场景。

基本结构与原理

轮播图通常由一个外层容器和多个子项（图片或内容）组成。通过将所有子项水平排列在一行，并利用 translateX 水平移动整个内容行，实现“切换”效果。使用 @keyframes 定义动画，控制移动的位置和时间点。

示例 HTML 结构：

<div class="carousel">
  <div class="carousel-track">
    @@##@@
    @@##@@
    @@##@@
    @@##@@
  </div>
</div>

CSS 样式设置

关键在于让所有图片并排显示，超出容器的部分隐藏，并通过动画周期性地改变位置。

核心 CSS 代码：

语鲸

AI智能阅读辅助工具

314

查看详情

.carousel {
  width: 100%;
  overflow: hidden; /* 隐藏超出部分 */
  white-space: nowrap; /* 防止换行 */
}
<p>.carousel-track {
display: flex;
width: 400%; /<em> 四张图总宽度为容器的400% </em>/
animation: slide 8s infinite; /<em> 每8秒循环一次 </em>/
}</p><p>.carousel-track img {
width: 25%; /<em> 每张图占容器宽度的25% </em>/
height: auto;
flex-shrink: 0;
}</p><p>@keyframes slide {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
75% {
transform: translateX(-300%);
}
100% {
transform: translateX(0); /<em> 回到起点，形成循环 </em>/
}
}</p>