如何用css制作轮播图效果-css教程-PHP中文网

如何用css制作轮播图效果

P粉602998670

发布： 2025-09-24 13:07:01

原创

444人浏览过

答案是使用CSS的animation和@keyframes可实现图片自动轮播，通过translateX控制横向位移，配合overflow:hidden容器形成滑动效果，适合静态展示。

如何用css制作轮播图效果

用CSS制作轮播图效果，核心是利用动画（animation）和关键帧（@keyframes）来控制图片的自动切换。虽然完整的轮播图通常需要JavaScript实现交互功能，但纯CSS也能做出自动播放的轮播效果，适合静态展示。

1. 基本HTML结构

准备一个容器，内部包含多张图片，使用单个容器横向排列所有图片：

2. 使用CSS布局图片

将所有图片放在一行，超出容器部分隐藏，形成滑动视觉效果：

.carousel {
  width: 400px;
  height: 300px;
  overflow: hidden;
  margin: 50px auto;
  position: relative;
}

.carousel-image {
  width: 400px;
  height: 300px;
  object-fit: cover;
  float: left;
}

3. 添加动画实现自动轮播

通过@keyframes定义图片的移动位置，让整个图片组向左滑动：

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

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(0); }
  34% { transform: translateX(-400px); }
  66% { transform: translateX(-400px); }
  67% { transform: translateX(-800px); }
  100% { transform: translateX(-800px); }
}

.carousel {
animation: slide 9s infinite;
animation-timing-function: ease-in-out;
}

说明：假设有3张图，每张宽400px，总宽度1200px。动画分三段，每段停留约3秒，通过transform: translateX控制偏移量实现切换。