在HTML和CSS中，以前的網頁要實現點擊伸縮效果，需要使用JavaScript來完成。但隨著CSS3的出現，我們可以使用一些新的屬性來實現這個效果，而無需編寫大量的JavaScript代碼。下面是一段CSS3的點擊伸縮代碼:

.wrapper {
width: 200px;
height: 150px;
background-color: #ccc;
overflow: hidden;
transition: height 0.5s ease;
}
.wrapper.active {
height: 300px;
}
.btn {
background-color: #333;
color: #fff;
padding: 10px 20px;
cursor: pointer;
}
.btn:hover {
background-color: #444;
}

這段代碼中，首先我們定義了一個容器wrapper，并設置了它的寬度、高度和背景顏色，同時使用了overflow: hidden屬性將超出容器部分的內容隱藏起來。然后我們定義了一個.btn按鈕，用來觸發伸縮效果。

接著，使用了CSS3的transition屬性，將height這個屬性在0.5秒內變化完成，設置了一個緩動函數，讓效果更加平滑。在.wrapper.active樣式中，我們將height屬性的值擴大到300px，實現了點擊伸縮效果。

最后，在.btn樣式中，我們設置了一些按鈕的基本樣式，并使用了:hover偽類，讓按鈕在鼠標移入時變換顏色，提升用戶體驗。