CSS風琴式是一種常用的動態效果，用于展示內容中的重點信息。它通常被用于網站導航、選項卡和折疊面板等UI元素中，以增強用戶的交互體驗。

/* CSS代碼 實現基本的風琴式效果 */
.accordion {
width: 100%;
max-width: 600px; /*設置寬度防止樣式錯亂*/
}
.accordion-title {
padding: 12px 16px;
background-color: #f0f0f0;
border: 1px solid #d9d9d9;
cursor: pointer;
}
.accordion-content {
padding: 16px;
background-color: #fff;
border: 1px solid #d9d9d9;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.accordion-title.active {
background-color: #fff;
}
.accordion-title.active + .accordion-content {
max-height: 500px; /*設置內容最大高度*/
}

以上代碼實現了一個基本的CSS風琴式效果，它由accordion、accordion-title、accordion-content三個部分組成。

其中，accordion是風琴式整體的容器，而accordion-title是每個標題的容器，accordion-content則是對應每個標題的具體內容。

為了實現動態效果，需要設置max-height屬性，并對容器進行過渡（transition），并通過添加class來切換狀態。

使用CSS風琴式可以為網站增加一些簡單而實用的交互效果，讓用戶感受到更舒適便捷的瀏覽體驗。