动画导航菜单

上周末，我使用 HTML 和 CSS（这次没有使用 JavaScript）编写了一个交互式导航：

（如果您错过了初始动画，或者想要再次观看，请单击右下角的“重新运行”。）

对于此演示：

• 我尝试坚持使用语义 HTML 并提供一种可访问的方法（希望我没有搞乱这部分）。
• 初始加载动画animation仅运行一次并且之后保持不变。
• 使用 3D CSS 使列表元素弹出和返回。
• 焦点和悬停状态得到同等对待，因此鼠标和键盘用户都能获得类似的体验。
• 它具有减少运动的样式，可以降低动画和过渡速度，因此不会有太多的运动（导航项仍会弹出，但不会是动画）。
• 我使用drop-shadow()过滤器生成整个菜单的阴影（独立于菜单项的阴影）。
• 也用来box-shadow给兄弟元素添加内嵌阴影，增强纵深感。我之前用的是外嵌阴影，但遇到了一些麻烦，所以可能做得有点复杂了。
• 我曾经:has()选择兄弟（前一个和后一个）处于活动状态的兄弟，并为它们添加一些深度和阴影。
• 它使用 Font Awesome 作为图标。

感谢您检查组件。如有任何疑问，请告诉我。欢迎提供任何反馈和建议！