动画悬停导航

Question

我喜欢上的导航悬停本网站的动画，但我无法找到的代码。谁能帮？

https://mikelevin.org/

我的导航HTML低于，我想为一个导航类似上面的链接创建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类没有什么定义呢，这正是我想我会命名的动画类

Answer 1

单纯看<a>元素，它具有:before伪元素。

在之前是在位置absolute，相对于其父，<a>，使用这些设置，它需要100％的宽度和它的父的高度：

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

然后，看看转换属性：

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

这就像宽度设置为“0”，用变换。

我还没有看CSS当<a>悬停，但我非常肯定，它是类似的东西（伪元素）：

transform: scaleX(1);

一个将简单地从它的原始尺寸的0〜100％动画的元素。

Answer 2

使用Chrome开发者工具（右击元素>检查），您可以检查的项目资产净值CSS规则之一。例如，我看着以“捐赠”的文字<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;

此外，如果您在元素的外观窗格的<a>孩子下此<li>你会发现，它的可扩展性。正如你所看到的，是一个伪元素，由::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);

有被应用到其非悬停状态的::before元素稍微多一些的CSS，但我会离开你玩的DevTools弄明白:)