CSS 是一種控制網(wǎng)頁樣式的語言，可以用它來設(shè)置網(wǎng)站的外觀和布局。而在網(wǎng)站中，常常有需要點擊改變圖片的效果。下面我們就來一起學(xué)習(xí)一下如何使用 CSS 實現(xiàn)這個效果。

/* HTML 代碼 */
<button id="btn1">點擊切換圖片</button>
<img id="img1" src="img1.jpg">
/* CSS 代碼 */
#img1 {
width: 500px;
height: 400px;
transition: all 1s; /* 添加過渡效果 */
}
#btn1 {
font-size: 20px;
padding: 10px 20px;
}
#btn1:hover {
background-color: #f0f0f0;
cursor: pointer;
}

首先，在 HTML 代碼中，我們添加了一個按鈕和一張圖片。在 CSS 代碼中，我們設(shè)置了圖片的寬度和高度，并且添加了過渡效果。這樣，當我們點擊按鈕時，圖片的樣式會有一個平滑的變化。

接下來，我們要使用 JavaScript 和 CSS 來實現(xiàn)點擊改變圖片的效果。具體實現(xiàn)方法如下：

/* JavaScript 代碼 */
var img1 = document.getElementById("img1");
var btn1 = document.getElementById("btn1");
btn1.onclick = function() {
if (img1.src.endsWith("img1.jpg")) { /* 判斷當前圖片 */
img1.src = "img2.jpg"; /* 切換圖片 */
} else {
img1.src = "img1.jpg";
}
}

在 JavaScript 代碼中，我們使用了 DOM（文檔對象模型）來獲取按鈕和圖片的元素，并添加了點擊事件。當按鈕被點擊時，我們使用一個 if 語句來判斷當前圖片的路徑。如果當前是 img1.jpg，就把圖片路徑改為 img2.jpg，并且圖片會有一個漸變效果。如果當前是 img2.jpg，就把圖片路徑改為 img1.jpg。這樣，我們就實現(xiàn)了點擊切換圖片的效果。

從上面的代碼中，我們可以看到 CSS 和 JavaScript 都是實現(xiàn)點擊改變圖片效果的重要因素。CSS 用于控制圖片的樣式和過渡效果，JavaScript 用于判斷當前圖片并實現(xiàn)切換圖片的功能。