利用css的动画效果制作轮播图
使用 CSS 动画制作轮播图
下面是一个纯 CSS 实现的轮播图方案，无需 JavaScript：
实现原理
- 使用
@keyframes创建动画序列 - 通过
animation属性控制轮播时间和循环方式 - 利用
transform: translateX()实现水平滑动效果 - 使用
overflow: hidden隐藏非活动内容
HTML 结构
<div class="slider"><div class="slides"><div class="slide">内容 1</div><div class="slide">内容 2</div><div class="slide">内容 3</div></div>
</div>
CSS 样式
.slider {width: 100%;overflow: hidden;position: relative;
}.slides {display: flex;width: 300%; /* 3张幻灯片 */animation: slide 12s infinite;
}.slide {flex: 0 0 33.333%; /* 每张幻灯片宽度 */min-height: 300px;display: flex;align-items: center;justify-content: center;background-size: cover;
}/* 定义动画关键帧 */
@keyframes slide {0%, 25% {transform: translateX(0);}33.3%, 58.3% {transform: translateX(-33.333%);}66.6%, 91.6% {transform: translateX(-66.666%);}100% {transform: translateX(0);}
}/* 幻灯片内容示例样式 */
.slide:nth-child(1) { background: linear-gradient(45deg, #ff9a9e, #fad0c4); }
.slide:nth-child(2) { background: linear-gradient(45deg, #a1c4fd, #c2e9fb); }
.slide:nth-child(3) { background: linear-gradient(45deg, #d4fc79, #96e6a1); }
关键参数说明
- 动画时长：
12s表示完整轮播周期- 每张幻灯片显示时间：约 3 秒
- 切换过渡时间：约 0.5 秒
- 百分比计算：
- 每张幻灯片占 33.333% 宽度
- 时间分配：25% 显示 + 8.3% 切换
- 无限循环：
infinite属性实现永久轮播
效果优化技巧
- 添加悬停暂停：
.slides:hover {animation-play-state: paused; } - 平滑过渡：
.slides {transition: transform 0.5s ease-in-out; } - 指示器（需额外 HTML）：
/* 指示器容器 */ .indicators {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%); }/* 指示点 */ .indicator {display: inline-block;width: 12px;height: 12px;border-radius: 50%;background: rgba(255,255,255,0.5);margin: 0 5px; }
数学原理
设幻灯片数量为 $n$，则：
- 容器宽度：$100n%$
- 单张宽度：$100/n%$
- 关键帧位置：
- 第 $k$ 张开始位置：$100(k-1)/n%$
- 显示时间占比：$t_d/t_{total}$
- 切换时间占比：$t_t/t_{total}$
本例中 $n=3$，总时间 $T=12\text{s}$，显示时间 $t_d=3\text{s}$，切换时间 $t_t=1\text{s}$。
浏览器兼容性
- 支持所有现代浏览器（Chrome/Firefox/Safari/Edge）
- IE10+ 需添加
-ms-前缀 - 移动端需添加触控优化（需 JavaScript 扩展）
提示：可通过调整动画时长百分比精确控制每张幻灯片的显示时间，修改
@keyframes中的百分比值即可实现不同切换效果。