CSS3中的過渡（transition）和動畫（animation）屬性常常被用來為網頁增加一些生動的效果。其中，先縮小再攤開的效果常常被用在hover和click事件上，可增強用戶對操作的視覺反饋。

實現這種效果的方法是利用CSS3中的transform和transition屬性。transform屬性可以實現元素的縮放、旋轉、平移等變換，而transition屬性則可以實現這些變換的過渡效果。下面的示例代碼實現了一個先縮小再攤開的效果。

/* 鼠標懸浮效果 */
.box {
width: 200px;
height: 200px;
background-color: #ccc;
transition: all 0.3s ease-out; /* 設置動畫時長和緩動函數 */
}
.box:hover {
transform: scale(0.8); /* 縮小為原來的0.8倍 */
}
.box:hover:after {
content: ""; 
display: block; 
width: 100%; 
height: 100%; 
background-color: #ccc; 
position: absolute; 
top: 0; 
left:0; 
transform: scale(1.25); /* 放大為原來的1.25倍 */
opacity: 0; /* 透明度為0，表示動畫結束時隱藏 */
transition: all 0.3s ease-out; /* 設置動畫時長和緩動函數 */
}

這段代碼中，box是要添加效果的元素。在:hover偽類下，設置了box縮小為原來的0.8倍，同時設置了:after偽元素，用于顯示動畫結束時的效果，它的縮放比例是1.25倍。為了讓這個效果更加平滑，設置了transition屬性，它會在動畫執行時自動補充緩動函數。最后通過opacity屬性將它隱藏，等到動畫結束后再顯示出來。

這種效果雖然簡單，但需要對CSS3的屬性有一定的了解才能掌握。而且，不同瀏覽器對CSS3的支持程度也不同，需要在實現時進行兼容性處理。嘗試使用這個效果可以更好地理解CSS3的變換和過渡屬性，希望本文對讀者有所幫助。