CSS樓層效果是一種常見的頁面設計效果，它可以讓用戶在滾動網頁時，根據頁面滾動位置自動高亮樓層，方便用戶快速定位當前所在位置。這種效果通常使用CSS3中的偽類和屬性實現。

/* CSS代碼示例 */
.floor{
position: relative;
height: 100vh; /* 設置樓層高度為100%的視口高度 */
background-color: #fff;
}
.floor:after{
content: "";
position: absolute;
bottom: 0;
left: 50%; /* 讓箭頭位于樓層底部中心位置 */
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: #fff transparent transparent transparent; /* 通過設置邊框顏色，形成箭頭效果 */
transform: translateX(-50%); /* 讓箭頭水平居中 */
}
.floor.active{
background-color: #f3f3f3; /* 設置當前樓層背景色為灰色 */
}
.floor.active:after{
border-color: #f3f3f3 transparent transparent transparent; /* 使箭頭顏色與背景色一致 */
}

上述代碼中，我們首先定義了.floor類，設置樓層高度為100%的視口高度，并通過 :after 偽類創建了一個具有箭頭效果的元素。 當樓層處于活動狀態時，即用戶滾動到該樓層時，我們可以通過為該樓層添加.active類來修改其背景色，同時也會讓箭頭效果的顏色保持一致。

此外，我們還可以通過JavaScript對滾動事件進行監聽，并根據當前滾動位置來動態修改樓層的狀態。整個效果非常簡潔，卻能有效提高頁面的交互性和易用性。