本文將介紹如何使用CSS實現一次點擊出現兩個圖片的效果。在實現之前，我們需要先創建一個HTML文檔，并在文檔中準備好需要使用的圖片資源。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS點擊一下出兩個圖片</title>
<style type="text/css">
.image {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<img src="img1.jpg" alt="image1" onclick="showImage()">
<img src="img2.jpg" alt="image2" onclick="showImage()" class="image">
<img src="img3.jpg" alt="image3" onclick="showImage()" class="image">
<script type="text/javascript">
function showImage() {
var images = document.getElementsByClassName("image");
for (var i = 0; i < images.length; i++) {
if (images[i].classList.contains("show")) {
images[i].classList.remove("show");
} else {
images[i].classList.add("show");
}
}
}
</script>
</body>
</html>在上述代碼中，我們使用了三個圖片，其中前兩個圖片設置為class屬性為“image”，并且在CSS樣式中將其display屬性設為“none”，以便頁面加載時隱藏這兩個圖片。
接下來，我們定義一個名為“showImage”的JavaScript函數，用于在單擊圖片時在兩張隱藏的圖片和當前圖片之間進行循環，并根據其class屬性將其設置為“show”或“image”以顯示或隱藏它們。
最后，我們在HTML文檔中的所有圖片上包含“onclick”屬性，并將其值設置為“showImage()”，以便單擊圖片時觸發JavaScript函數。