javascript - 我将如何为本网站的导航创建悬停动画？

Question

网址是https://ceremonycoffee.com/ .我如何用下划线复制他们的导航悬停动画？我真的无法在他们的检查元素中找到它。另外，它是由 CSS 还是 Javascript 制作的？谢谢!

Answer 1

你可以用完整的 css 来做，看这个片段:

h2 > a {
  position: relative;
  color: #000;
  text-decoration: none;
}

h2 > a:hover {
  color: #000;
}

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

h2 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<h2><a href="#">My Link</a></h2>

它依赖于 ::before 伪元素。您将其水平比例设置为零，添加一个过渡属性，以便在悬停时它平滑地转换为完整链接比例。

来源和解释:Animating Links Underline