Question

我已经知道这个下划线/边框底部动画很长一段时间了（小提琴：https://jsfiddle.net/0ou3o9rn/4/），但我似乎无法弄清楚我是如何做到的正确设计我的代码...没有任何作用。

CSS：

<GridPane>
   <GridPane.Row>
       <Label text="field1"/>
       <TextField/>
   </GridPane.Row>
   <GridPane.Row>
       <Label text="field2"/>
       <TextField/>
   </GridPane.Row>
</GridPane>

HTML：

.lists li {
    position: absolute;
    display:block;
    left: 0;
    top:90%;
    margin:0 auto;
    height: 2px;
    background-color: #000;
    width: 0%;
    transition: width 1s;}

例如，这不起作用，但当我将鼠标悬停在<div class="lists"><ul> <li><a href="/">link 1</a></li> <li><a href="/">link 2</a></li> <li><a href="/">link 3</a></li> </ul></div> s / li上时，我仍然希望显示动画下划线。谁能帮我？谢谢！

Answer 1

不需要额外的标记（伪也无论如何都可以完成这项工作），您可以简单地使用背景图像（或渐变）并使用background-size来扩展/缩小效果。可以使用背景位置设置效果可以开始的位置（下面的演示：左，中，右）

＆＃13;

.lists li {
  display: inline-block;
  margin:0 1em;
}
.lists li a {
  display: block;
  padding: 3px 1em 3px;
  text-decoration: none;
  background: linear-gradient(to left, gold, gold) no-repeat bottom center;
  background-size: 0% 3px;
  /* will not show */
  transition: 0.25s;
}
.lists li a:hover {
  background-size: 100% 3px;
  /* will expand whole width */
}

/* some more styling ? */
.lists {
  background:gray;
  }
.lists li:first-of-type a {
  background-position: bottom left;
}
.lists li:last-of-type a {
  background-position: bottom right;
}
.lists li a {
  background-color: #222;
  color: #ace
}

＆＃13;

<div class="lists">
  <ul>
    <li><a href="/">link 1</a>
    </li>
    <li><a href="/">link 2</a>
    </li>
    <li><a href="/">link 3</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

滑块是一个2px高的盒子。最初的阻止是0px。当用户将鼠标悬停在#name上时，滑块的宽度变为100％。现在css过渡应用于此宽度。所以，这个动画就出现了。

    <div id="splash"> <span id="name">random title
        <div class="slider"></div>
        </span>
    </div>


    .slider {
        position: absolute;
        display:block;
        left: 0;
        top:90%;
        margin:0 auto;
        height: 2px;
        background-color: #000;
        width: 0%;
        transition: width 1s;
    }
    #name:hover > .slider {
        width: 100%;
    }
    #splash {
        width:100%;
        height:100%;
        background-color:#fff;
        z-index:999999;
        position:fixed;
    }
    #name {
        color:#000;
        font-family:'Arial-BoldMT';
        font-weight:bold;
        font-size:50px;
        letter-spacing: -2px;
        display:block;
        left: 50%;
        transform: translate(-50%, 0);
        position:absolute;
        top:40%;
        margin:0 auto;
    }

链接悬停：动画底部边框/下划线

2 个答案: