CSS樓層效果是一種常見的頁面設(shè)計效果，它可以讓用戶在滾動網(wǎng)頁時，根據(jù)頁面滾動位置自動高亮樓層，方便用戶快速定位當(dāng)前所在位置。這種效果通常使用CSS3中的偽類和屬性實現(xiàn)。

/* CSS代碼示例 */
.floor{
position: relative;
height: 100vh; /* 設(shè)置樓層高度為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; /* 通過設(shè)置邊框顏色，形成箭頭效果 */
transform: translateX(-50%); /* 讓箭頭水平居中 */
}
.floor.active{
background-color: #f3f3f3; /* 設(shè)置當(dāng)前樓層背景色為灰色 */
}
.floor.active:after{
border-color: #f3f3f3 transparent transparent transparent; /* 使箭頭顏色與背景色一致 */
}

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

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