CSS3側欄伸縮效果是Web頁面中常用的交互效果之一，通過簡單的CSS樣式實現側欄的收縮和展開，讓頁面更加美觀和易用，以下是使用CSS3實現側欄伸縮效果的代碼示例：

/* 定義側欄和主內容的寬度 */
.sidebar {
width: 200px;
background-color: #f2f2f2;
transition: width 0.2s ease-in-out;
}
.main-content {
width: calc(100% - 200px);
padding: 20px;
}
/* 定義收縮狀態的樣式 */
.sidebar.collapsed {
width: 50px;
}
.main-content.collapsed {
width: calc(100% - 50px);
}
/* 定義鼠標懸停狀態的樣式 */
.sidebar:hover {
width: 250px;
}
.main-content:hover {
width: calc(100% - 250px);
}

上述代碼中，首先定義了側欄和主內容的初始寬度，然后通過transition屬性定義了寬度的變化過渡效果。接著，定義了收縮狀態和鼠標懸停狀態下的樣式，通過添加和移除.collapsed類名來控制側欄和主內容的寬度。

在頁面中使用這段代碼時，可以通過JavaScript監聽鼠標事件，改變側欄和主內容的類名，從而實現側欄的伸縮效果。