悬停时动画菜单边框
Animate menu border on hover
我刚开始编写网页代码，现在最后我想添加一些特殊的动画，我有一个带有下拉菜单的水平菜单，当我将鼠标悬停在这个菜单点上时我想要一个动画。
我看过这个带边框的动画 https://harvard.edu
你能帮我做这个动画吗？
谢谢 :D
由于您没有提供任何代码也没有指定哪个边框动画，我假设您想从中间开始为底部边框制作动画。在那种情况下，这个带有演示的出色 Whosebug 答案回答了它：click here
这是通过在 :before 伪元素上使用 CSS3 过渡来完成的，附加到该菜单中的 <a> 标记。在他们的 CSS 中搜索此规则：.nav-group a:before
您可以看到他们给 :before 伪初始值 0% 宽度，然后在 :hover 伪上，他们将其设置为 100%。 （在 CSS 中搜索 .nav-group a:hover:before）
因为 :before 有一个 CSS 过渡设置，当它在悬停时从 0% 变为 100% 宽度时，你会得到一个很好的动画效果。
我刚开始编写网页代码，现在最后我想添加一些特殊的动画，我有一个带有下拉菜单的水平菜单，当我将鼠标悬停在这个菜单点上时我想要一个动画。 我看过这个带边框的动画 https://harvard.edu 你能帮我做这个动画吗？ 谢谢 :D
由于您没有提供任何代码也没有指定哪个边框动画，我假设您想从中间开始为底部边框制作动画。在那种情况下，这个带有演示的出色 Whosebug 答案回答了它：click here
这是通过在 :before 伪元素上使用 CSS3 过渡来完成的，附加到该菜单中的 <a> 标记。在他们的 CSS 中搜索此规则：.nav-group a:before
您可以看到他们给 :before 伪初始值 0% 宽度，然后在 :hover 伪上，他们将其设置为 100%。 （在 CSS 中搜索 .nav-group a:hover:before）
因为 :before 有一个 CSS 过渡设置，当它在悬停时从 0% 变为 100% 宽度时，你会得到一个很好的动画效果。