css图片轮播动画怎么写_利用animation和位移切换-css教程-PHP中文网

css图片轮播动画怎么写_利用animation和位移切换

P粉602998670

发布： 2025-12-21 13:35:12

原创

855人浏览过

用 CSS animation 和 transform: translateX() 可纯 CSS 实现图片轮播：HTML 扁平结构+flex 横排，父容器 overflow: hidden；@keyframes 控制 translateX 分段位移（如 4 图设 0%/-100%/-200%/-300%/0%），配合 steps() 或精确时间点实现停顿滑动效果。

css图片轮播动画怎么写_利用animation和位移切换

用 CSS animation 和 transform: translateX() 实现图片轮播，核心是让一组图片在水平方向上依次位移，形成循环滑动效果。不需要 JS 也能完成，但需注意结构布局和关键帧控制逻辑。

HTML 结构要扁平且可循环

把所有图片放在一个容器内，用 display: flex 横向排列，确保总宽度足够容纳全部图片（避免换行）：

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

登录后复制

注意：所有图片宽高需一致，或用 flex-shrink: 0 防止压缩；父容器设 overflow: hidden 裁剪超出部分。

用 translateX + animation 实现自动位移

动画本质是让整个图片组从左往右（或右往左）匀速移动，每张图占据 100% 容器宽度，位移单位为 100%。假设 4 张图，完整一轮需移动 -300%（即前三张图的宽度），最后回到起点形成循环：

立即学习“前端免费学习笔记（深入）”；

ChatPDF

使用ChatPDF，您的文档将变得智能!跟你的PDF文件对话，就好像它是一个完全理解内容的人一样。

327

查看详情

用 @keyframes 定义从 translateX(0) 到 translateX(-300%) 的线性运动
动画时长按需设定（如 8s），并用 infinite 循环
关键点：最后一帧必须回到 translateX(0)，否则会跳变；可用 steps(4) 或分段 keyframes 控制停顿

示例动画（4 图无缝循环）：

@keyframes slide {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-100%); }
  50%  { transform: translateX(-200%); }
  75%  { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

.carousel {
  display: flex;
  overflow: hidden;
  animation: slide 8s ease-in-out infinite;
}

登录后复制