CSS縮放導航滑過是一種常用的網頁效果，它能夠給用戶帶來舒適的視覺體驗。下面就讓我們來學習一下如何實現CSS縮放導航滑過效果。

.nav-item {
display: inline-block;
padding: 20px;
position: relative;
text-transform: uppercase;
}
.nav-item:hover:after {
animation: scale-down .3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes scale-down {
0% {
transform: scaleX(1);
background-color: transparent;
}
100% {
transform: scaleX(0);
background-color: #000;
}
}

以上是這種效果的CSS代碼，其中包括了一個.nav-item類，它用于定義導航圖標的樣式，還包括了一個關鍵幀動畫，用于定義鼠標滑過時圖標的縮放效果。

對于.nav-item類，我們給它定義了display:inline-block屬性，以使它能夠水平排列。同時，我們還給它指定了padding、position以及text-transform屬性，以確定它的外觀和位置。

而對于關鍵幀動畫，我們定義了一個scale-down的動畫，它包含了兩個關鍵幀。第一個關鍵幀用于定義初始狀態，第二個關鍵幀用于定義最終狀態。我們通過transform屬性，將導航圖標的X軸縮小，以實現縮放效果。同時，我們還通過修改background-color屬性，使縮放的圖標能夠覆蓋原來的圖標，以達到滑過效果。

通過以上代碼，我們就可以實現一個完美的CSS縮放導航滑過效果了。需要注意的是，我們在animation屬性中指定了cubic-bezier函數，用于定義縮放效果的動畫曲線，以確保效果的平滑度。