上週末，我使用 HTML 和 CSS 編寫了互動式導覽（這次沒有使用 JavaScript）：
https://codepen.io/alvaromontoro/pen/yLWeozP
（如果您錯過了初始動畫，或者想再次看到它，請點擊右下角的「重新執行」。）
對於這個演示：
-
我嘗試堅持使用語義 HTML 並提供一種可存取的方法（希望我沒有搞亂這部分）。
-
初始載入動畫是只執行一次並在之後保持原樣的
animation。 -
使用 3D CSS 使清單元素彈出和返回。
-
焦點和懸停狀態受到同等對待，因此滑鼠和鍵盤使用者都會獲得相似的體驗。
-
它具有減少運動的樣式，可以降低動畫和過渡速度，因此沒有太多的運動（導航專案仍會彈出，但不會動畫化）。
-
我使用
drop-shadow()過濾器產生整個選單的陰影（獨立於選單專案的陰影）。 -
還使用
box-shadow為兄弟姐妹加入嵌入陰影並提供更大的深度感。我一開始是用陰影來做的，但我遇到了一些麻煩，所以我可能會把它們弄得過於複雜了。 -
我使用
:has()選擇處於活動狀態的兄弟姐妹（前一個和後一個），並為其加入一些深度和陰影。 -
它使用 Font Awesome 作為圖示。
感謝您檢查該元件。如果您有任何疑問，請告訴我。歡迎所有回饋和建議！
原文出處：https://dev.to/alvaromontoro/animated-navigation-menu-57o7
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章