CSS輪番圖片技術是一種用于讓網頁上的圖片自動輪播的技術。這種技術是基于CSS3的動畫效果實現(xiàn)的，具有簡單、易用的特點，下面我們來看看如何使用CSS輪番圖片技術。

html:
<div class="carousel-container">
<ul class="carousel-images">
<li><a href="#"><img src="image-1.jpg" alt="image-1"></a></li>
<li><a href="#"><img src="image-2.jpg" alt="image-2"></a></li>
<li><a href="#"><img src="image-3.jpg" alt="image-3"></a></li>
</ul>
</div>
css:
.carousel-container {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.carousel-images {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
width: 300%;
height: 300px;
left: 0;
animation: change 12s infinite;
}
.carousel-images li {
float: left;
width: 33.333333%;
}
@keyframes change {
0%, 100% {
left: 0;
}
25% {
left: 0;
}
26%, 49% {
left: -100%;
}
50%, 75% {
left: -200%;
}
76%, 99% {
left: -300%;
}
}

在html中，我們首先需要定義一個<div>容器，它包含一個<ul>列表，列表中的每一個<li>元素中包含一個<a>標簽和一個<img>標簽，<a>標簽用于添加超鏈接，而<img>標簽用于顯示圖片。在css中，我們定義了.carousel-container容器為一個固定高度并且具有隱藏溢出內容的屬性，而.carousel-images則是一個position為絕對定位、超出容器寬度的3倍，也就是圖片總數(shù)的3倍，動畫由change函數(shù)實現(xiàn)。

最后，在使用CSS輪番圖片技術時，我們需要把以上的代碼復制至自己的網頁中，并把圖片的路徑替換為自己的圖片路徑即可。