最近，我開始探索CSS的更多效果，發現了一些有趣的收縮效果，讓頁面看起來更加生動有趣。

/* 收縮效果一：伸展 */
.expandable {
overflow: hidden;
transition: max-height 0.5s ease;
max-height: 0;
}
.expandable.open {
max-height: 9999px;
}

這是一種基本的收縮效果，隨著鼠標點擊或鼠標懸停，元素內容將順滑展開或收縮。 其中，分組用一個類添加到您的頁面中，這可能是一個列表，一個下拉菜單或任何其他需要展開和關閉的元素。

/* 收縮效果二：折疊 */
.collapsible {
overflow: hidden;
transition: max-height 0.5s ease;
max-height: 100px;
}
.collapsible.open {
max-height: 9999px;
}

這個效果比伸展更復雜，因為它需要一個手動設置的最小高度來達到收縮效果。 當元素打開時，如果沒有足夠的內容，它將繼續顯示最低高度，不會完全展開。 這里的max-height屬性被設置為100px，啟動收縮效果。

/* 收縮效果三：淡入淡出 */
.fadeable {
opacity: 1;
transition: opacity 0.5s ease;
}
.fadeable.hide {
opacity: 0;
}

這是一種非常簡單的收縮效果，只需改變元素的透明度，讓它平滑地淡入或淡出。 您可以使用它來隱藏元素，使它們從頁面上消失，并且不會干擾其他元素的位置和對齊方式。

完成以上方法后，您的頁面現在可以使用更豐富多彩的CSS收縮效果了。