CSS 點(diǎn)擊放大和縮小是 Web 設(shè)計(jì)中常見(jiàn)的功能之一。這種功能的實(shí)現(xiàn)方法基于 CSS 中的transform屬性。

首先，在HTML中需要?jiǎng)?chuàng)建一個(gè)元素，如一個(gè)圖片。然后為其設(shè)置一個(gè)class屬性，如zoom。

.zoom {
width: 200px;
height: 200px;
transition: transform 0.5s ease;
}

在上面的樣式代碼中，我們?yōu)?code>.zoom元素設(shè)置了寬度和高度，并設(shè)置了一個(gè)transition屬性，該屬性用于讓代碼在點(diǎn)擊時(shí)有一個(gè)緩和效果。

接下來(lái)，我們需要實(shí)現(xiàn)點(diǎn)擊縮放的功能。這可以通過(guò) :hover 偽類(lèi)和 transform 屬性來(lái)實(shí)現(xiàn)。

.zoom:hover {
transform: scale(1.5);
}

在上面的樣式代碼中，當(dāng)鼠標(biāo)懸停在元素上時(shí)，我們使用了transform: scale(1.5)屬性來(lái)放大元素1.5倍。

最后，我們需要實(shí)現(xiàn)點(diǎn)擊縮小的功能。這可以通過(guò) JavaScript 來(lái)實(shí)現(xiàn)。首先，我們需要?jiǎng)?chuàng)建一個(gè) JavaScript 函數(shù)，并綁定到元素的onclick事件上。

function zoomOut() {
document.querySelector('.zoom').style.transform = "scale(1)";
}

在上面的代碼中，我們創(chuàng)建了一個(gè)名為zoomOut的函數(shù)來(lái)縮小元素，然后使用 JavaScript 的querySelector方法和.zoom選擇器來(lái)獲取該元素，并將transform屬性設(shè)置為scale(1)，將它恢復(fù)到原始大小。

最后，將這個(gè)函數(shù)綁定到元素的點(diǎn)擊事件上：

<img class="zoom" src="large-image.jpg" onclick="zoomOut()">

在上面的代碼中，我們把 `onclick` 事件綁定到 `zoomOut()` 函數(shù)上，這樣當(dāng)我們點(diǎn)擊這個(gè)圖片時(shí)，就可以縮小它了。