当前位置：首页 > 文章列表 > 文章 > 前端 > CSS图片缩放轮播实现方法详解

CSS图片缩放轮播实现方法详解

2026-02-04 11:20:43 0浏览收藏

1. 基本HTML结构

准备一个容器和若干图片项，每张图用一个 div 包裹：

2. 设置CSS样式与布局

让轮播容器居中显示，隐藏溢出内容，所有图片默认隐藏，只显示当前激活项：

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

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  left: 0;
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. 定义缩放动画关键帧

使用 @keyframes 创建缩放进入和淡出效果：

@keyframes zoomFade {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

动画从放大 1.2 倍淡入，保持 1 倍大小一段时间后，再淡出并轻微放大，营造平滑过渡感。

4. 应用动画到每个图片

为每个 .carousel-item 添加动画，通过设置不同的延迟时间实现轮播：

.carousel-item:nth-child(1) {
  animation: zoomFade 6s ease-in-out 0s infinite;
}
.carousel-item:nth-child(2) {
  animation: zoomFade 6s ease-in-out 2s infinite;
}
.carousel-item:nth-child(3) {
  animation: zoomFade 6s ease-in-out 4s infinite;
}

每张图延迟 2 秒启动动画，总周期 6 秒，形成循环播放。你可以根据图片数量调整延迟时间。

5. 可选：添加暂停悬停效果

如果希望鼠标移上时暂停动画，可添加：

.carousel:hover .carousel-item {
  animation-play-state: paused;
}

基本上就这些。通过控制 scale() 和 opacity 的变化，配合定时错开的动画延迟，就能实现流畅的缩放轮播效果。不需要 JavaScript，纯 CSS 实现，轻量且兼容性好。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

抖音企业号认证流程及蓝V申请指南

上一篇: 抖音企业号认证流程及蓝V申请指南

下一篇: UUID版本选择攻略：怎么选最合适？

查看更多