CSS輪播圖過渡是一種使圖片或文字實現自動播放切換的效果，同樣也能通過css屬性來控制圖像或文字的運動方式和速度。
下面是一個簡單的CSS輪播圖過渡實現的代碼：
<html>
<head>
<title>CSS輪播圖</title>
<style>
.slider {
width: 1000px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
.slider img {
width: 1000px;
height: 500px;
float: left;
}
@keyframes slide {
0% {
margin-left: 0;
}
25% {
margin-left: -1000px;
}
50% {
margin-left: -2000px;
}
75% {
margin-left: -3000px;
}
100% {
margin-left: -4000px;
}
}
.slider img {
animation: slide 20s infinite;
}
</style>
</head>
<body>
<div class="slider">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</div>
</body>
</html>我們可以看到，通過這段代碼，能夠實現一個自動播放的輪播圖，并且圖像會在 20 秒內完成一次移動，連續循環，實現無限循環的過程。
要實現CSS輪播圖過渡效果，我們需要掌握一些CSS屬性，例如：transition、animation、transform 等等。通過這些屬性的掌握，實現輪播圖效果也就輕而易舉了。
上一篇css面試常用題
下一篇css面板鏈接外部樣式表