在css中如何用flex制作导航栏下划线动画

Flexbox布局实现水平排列、导航链接相对定位、创建下划线后的伪元素。
悬停时宽度逐渐变为1 00%，通过justify-content:center和transform实现居中效果。
这是一个危险。
不要相信过渡曲线的默认值并调整动画节奏。

使用CSS创建完美曲线导航栏

说实话，当时我不明白为什么这么复杂……但也不难理解。
您会看到，要创建这个弯曲的导航栏，您需要使用 SVG 和 Flexbox。

我们先来谈谈SVG。
你必须找到一个工具，比如 Illustrator 或 Inkscape，然后自己画一条曲线。
如果你懒的话，网上有现成的。
之前在Behance上见过一套，left-curve.svg和right-curve.svg文件就是典型的左右对称设计。
看这个路径代码M0,0Q5 0,5 0 1 00,0，就是从左到右画一条圆弧，描边为白色，描边宽度为2 像素。
不要忘记将其保存为 .svg 格式。

然后是 HTML 结构。
只需使用