Question

这里有一个导航菜单

HTML

<ul>
  <li><a href="#">HOME</a><div></div></li>
  <li><a href="#">PAGE</a><div></div></li>
  <li><a href="#">ABOUT US</a><div></div></li>
  <li><a href="#">CONTACT US</a><div></div></li>
</ul>

我使边框底行出现在悬停和活动菜单中。但是问题是如何制作动画效果。

SCSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  li {
    float: left;
    &:hover a {
      cursor: pointer;
      color: blue;
    }
    &:hover div,
    &.router-link-active div {
      border-bottom: 2px solid blue;
      border-width: thin;
      margin-left: 15%;
      margin-right: 15%;
    }
    a {
      display: inline-block;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      color: grey;
    }
  }
}

这里是codepen链接。需要像this这样的动画。但无需删除锚标记旁边的div元素。

Answer 1

您提供的示例使用CSS pseudo elements产生类似边框的效果。

HTML

   <ul class="nav">
        <li class="nav_item">Home</li>
        <li class="nav_item">About</li>
        <li class="nav_item">Contact</li>
        <li class="nav_item">help</li>
    </ul>

CSS

        .nav{
            list-style: none;
            position:fixed;
        }
        .nav_item{
            display:inline-block;
            padding:10px;
            font-size:25px;
            cursor:pointer;
        }
        .nav_item:after{
            content:'';
            display: block;
            margin: auto;
            height: 3px;
            width: 0px;
            background: transparent;
            transition: width .5s ease, background-color .5s ease;
        }
        .nav_item:hover:after{
            width:100%; /*change the width of the border like element*/
            background:red;
        }

如果要更改伪元素的宽度，请更改CSS中.nav_item:hover:after的宽度

示例：

.nav_item:hover:after{
       width:50%;
       background:red 
 }

jsfiddle：https://jsfiddle.net/xjoerz56/2/

导航菜单边框的底行从中间展开

1 个答案: