CSS 导航栏滑块高亮动画？

Question

我正在尝试创建一个带有下划线的顶部导航栏，该下划线在悬停时在每个 link/button 下方滑动。我猜过渡或关键帧都可以，但我似乎无法让它工作。

这是我最好的镜头，但我只能使父导航或 div 成为触发器而不是实际链接本身，而且我无法让栏滑动到相对于链接（现在它只是向右平移 500 像素）。

如有任何帮助，我们将不胜感激！

#header {
 position: fixed;
 background-color: rgba(255, 255, 255, 0.7);
 width: 100%;
 top: 0px;
 left: 0px;
  z-index: 1;
  text-align: center;
  padding: 15px;
}

.nav ul li {
  font-family: 'Exo', sans-serif;
  text-transform: uppercase;
  list-style-type: none;
  display: inline;
  padding: 11px;
}

.slider {
 position: absolute;
 bottom: 0px;
 left: -50px;
 width: 50px;
 height: 5px;
 background-color: rgba(52, 152, 219, 0.3);
 transition-property: transform;
 transition-duration: 300ms;
 transition-timing-function: ease-in-out;
 transition-delay: 0s;
}

.nav:hover .slider {
   transform: translate(500px);
}

.nav ul li a {
  text-decoration: none;
  margin: 0px 30px 0px 30px;
  color: rgba(0, 0, 0, 0.5);

<header id="header">
       <nav class="nav">
        <ul class="list">
              <div class="slider"></div>
         <li class="btn"><a href="#home">Home</a></li>
         <li class="btn"><a href="#about">About</a></li>
         <li class="btn"><a href="#portfolio">Portfolio</a></li>
         <li class="btn"><a href="#contact">Contact</a></li>
        </ul>
       </nav>
       </header>

Answer 1

你也许可以做这样的事情？

$('li').on('click', function() {
  $('.current').removeClass('current');
  $(this).addClass('current');
}).has("a[href*='" + location.pathname + "']").addClass("current");

  .nav {
    width: 50%;
    margin: 0 auto;
    font-family: 'Exo', sans-serif;
    text-transform: uppercase;
    list-style-type: none;
    display: inline;
    padding: 11px;
  }

ul li {
    display: inline;
    text-align: center;
  }

  a {
  display: inline-block;
  width: 25%;
  margin: 0;
  text-decoration: none;
  color: black;
 }

 .home.current ~ hr,
   ul li.home:hover ~ hr {
   margin-left: 0%;
 }
   
  .about.current ~ hr,
   li.about:hover ~ hr {
      margin-left: 25%;
   }
  
  .portfolio.current ~ hr,
   li.portfolio:hover ~ hr {
    margin-left: 50%;
   }

  .contact.current ~ hr,
   li.contact:hover ~ hr {
   margin-left: 75%;
   }

hr {
 height: 3px;
 width: 25%;
 margin: 0;
 background-color: rgba(52, 152, 219, 0.3);
 transition-property: transform;
 transition: .3s ease-in-out;
   }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header id="header">
  <div class="nav">
    <ul>
      <li class="home"><a href="#home">Home</a></li><!--
   --><li class="about"><a href="#about">About</a></li><!--
   --><li class="portfolio"><a href="#portfolio">Portfolio</a></li><!--
   --><li class="contact"><a href="#contact">Contact</a></li>
     <hr />
    </ul>
 </div>
</header>

或者你想让下划线从屏幕的一侧出来？

编辑：添加了 js/jQuery，使菜单项在点击时保持不变。

CSS 导航栏滑块高亮动画？

CSS navbar slider highlight animation?

html

css

animation

navbar

css-animations