CSS可以輕松地實現鼠標點擊變換圖片的效果，讓網頁更加生動有趣，下面我們來看一下實現的方法。

html：
<div class="image-container">
<img src="original-image.jpg" alt="原始圖片" class="image">
</div>
css:
.image-container {
cursor: pointer;
}
.image:hover {
transform: scale(1.1);
transition: transform 0.3s ease-in-out;
}
.image:active {
transform: scale(0.9);
transition: transform 0.15s ease-in-out;
}

首先在html中包含一個裝載圖片的div元素，圖片使用img標簽，以及一個class名為“image”的類；
接下來，在css中定義鼠標懸停效果，當鼠標懸停在圖片上時，圖片變大1.1倍，同時添加一個0.3秒的動畫效果；
最后，定義鼠標點擊效果，當鼠標按下并保持不放時，圖片縮小為0.9倍，添加一個0.15秒的動畫效果。