导航悬停时的动画

Question

我喜欢这个网站的导航悬停动画，但我找不到代码。有人可以帮忙吗？？

我的导航 HTML 在下面，我想为像上面 link 这样的导航创建 CSS。

<nav id="menu" role="navigation">
  <ul id="topnav" class="topnav desktop-nav">
    <li class="active">
      <a href="/" class="inout">About</a>
    </li>
    <li >
      <a href="/join" class="inout">Join</a>
    </li>
    <li >
      <a href="/volunteer" class="inout">Volunteer</a>
    </li>
    <li >
      <a href="/contact" class="inout">Contact</a>
    </li>
  </ul>
</nav>

inout class 还没有任何定义，这正是我想给动画命名的 class

Answer 1

使用 chrome 开发人员工具（右键单击元素 > 检查），您可以检查其中一个导航项的 CSS 规则。例如，我查看了带有 "Donate" 文本的 <li>。在样式窗格中，您会注意到您可以切换元素的状态，这意味着您可以手动切换悬停状态（请参阅下面的屏幕截图）：

我看到显示以下 css：

#main-navigation ul.nav>li {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    visibility: visible;

此外，如果您查看此 <li> 下 <a> 子项的元素窗格，您会注意到它是可扩展的。如您所见，有一个伪元素，由 ::before 表示：

单击元素窗格中的 ::before，您可以调出它的 css 属性：

.navbar .navbar-nav>li:not(.btn):hover a:before, 
.navbar .navbar-nav>li:not(.btn):hover .hestia-toggle-search:before {
    color: inherit;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);

css 应用于非悬停状态的 ::before 元素只是多了一点，但我会让您使用 DevTools 来弄清楚： )

Answer 2

简单看一下<a>元素，它有一个:before伪元素

之前的位置 absolute，相对于其父级 <a>，使用这些设置，它占用其父级的 100% 宽度和高度：

top: 0;
right: 0;
bottom: 0;
left: 0;

然后，查看转换属性：

transform: scaleX(0);
transform-origin: 50%;

这就像将宽度设置为“0”，并进行变换。

当悬停在 <a> 上时，我没有看过 CSS，但我非常确定它是这样的（在伪元素上）：

transform: scaleX(1);

那个将简单地使元素从其原始大小的 0% 到 100% 进行动画处理。

导航悬停时的动画

animation on hover for navigation

css

css-transitions

css-animations