輪播圖是網頁中常見的一種效果，可以將幾張圖片循環播放，達到視覺上的連續感。常見的實現方式有jquery插件，但本文將介紹輪播圖純css實現方法。

.slideshow {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.slideshow .slides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
animation: slide 5s linear infinite;
}
.slideshow .slides img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes slide {
0% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
45% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
70% {
transform: translateX(-200%);
}
75% {
transform: translateX(-300%);
}
95% {
transform: translateX(-300%);
}
100% {
transform: translateX(-400%);
}
}

上述代碼中，.slideshow為輪播圖容器，設置其寬度、高度和相對定位。overflow設置為hidden是為了隱藏超出容器外部的內容。.slideshow .slides為輪播圖圖片容器，使用flex布局使圖片水平排列。animation屬性設置圖片滑動動畫，5s一次滑動，使用linear勻速滑動，infinite無限循環。

.slideshow .slides img設置圖片寬高為100%，使用object-fit: cover避免圖片變形。最后用@keyframes定義動畫效果。我們在50%、75%這兩個時間點切換圖片，借助transform實現。

到此為止，我們使用純css就實現了輪播圖的效果。使用純css實現的好處是無需引入jquery插件，體積更小，加載速度更快。但缺點是需要手動調整動畫時間和位置，不夠方便。