CSS是一種樣式表語言，可以讓網(wǎng)頁(yè)的設(shè)計(jì)變得更加美觀和易于閱讀。在網(wǎng)頁(yè)的設(shè)計(jì)中，經(jīng)常需要顯示多張圖片，而有時(shí)候我們需要讓兩張圖片按照一定的順序顯示。這時(shí)，可以借助CSS來實(shí)現(xiàn)。

下面我們來看一下如何通過CSS來讓兩張圖片按照順序顯示：

/* 首先，在CSS中定義兩個(gè)圖片的樣式 */
img.first {
display: block;
width: 200px;
height: 200px;
margin-bottom: 20px;
}
img.second {
display: none;
width: 200px;
height: 200px;
}
/* 然后，在CSS中定義一個(gè)動(dòng)畫效果，讓第一張圖片淡出，第二張圖片淡入 */
@keyframes swap {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* 最后，在HTML中使用JS來觸發(fā)動(dòng)畫效果 */
<script>
setInterval(function() {
// 獲取第一張圖片和第二張圖片的元素
var firstImg = document.querySelector('img.first');
var secondImg = document.querySelector('img.second');
// 判斷當(dāng)前顯示的圖片是第一張還是第二張
if (firstImg.style.display !== 'none') {
firstImg.style.animation = 'swap 1s ease-in-out';
secondImg.style.display = 'block';
firstImg.style.display = 'none';
} else {
secondImg.style.animation = 'swap 1s ease-in-out';
firstImg.style.display = 'block';
secondImg.style.display = 'none';
}
}, 2000);
</script>

上面的代碼中，我們定義了兩個(gè)圖片的樣式，第一張圖片最初是顯示的，第二張圖片最初是隱藏的。然后，在CSS中定義了一個(gè)動(dòng)畫效果，叫做swap，作用是讓第一張圖片淡出，第二張圖片淡入。最后，在HTML中使用JS來觸發(fā)動(dòng)畫效果。

通過上面的代碼，我們就可以讓兩張圖片順序顯示了。