如何在悬停链接上为线条设置动画

Question

当悬停在导航锚点上时，如何在https://www.javascript.com/中制作下划线动画？

我不知道怎么做，所以我还没有代码！

我知道如何从CSS3编写@keyframes，但我不知道如何创建这样的动画。

<div id="nav">
    <ul id="navbar">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
</div>



#navbar li:hover a {
   text-decoration: underline;
}

Answer 1

我已将INSERT INTO wise_estado ( cvgeo_estado, nombre_estado) SELECT 'CVE_ENT', 'NOM_ENT' FROM estados 元素用于:pseudo效果，而border则将hover从width更改为0%

100%

#navbar li {
  display: inline-block;
  padding: 15px;
}
#navbar li a {
  display: block;
  padding:10px 0;
  position: relative;
}
#navbar li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: red;
  transition: .5s linear;
}
#navbar li a:hover:after {
  width: 100%;
}

另一种方法是您可以<div id="nav"> <ul id="navbar"> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> </ul> </div>使用linear-gradient

background-position

#navbar li {
  display: inline-block;
  padding: 15px;
}
#navbar li a {
  display: block;
  padding: 10px 0;
  position: relative;
}
#navbar li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-image: -webkit-linear-gradient(left, red 50%, white 50%, white);
  background-image: -o-linear-gradient(left, red 50%, white 50%, white);
  background-image: -moz-linear-gradient(left, red 50%, white 50%, white);
  background-image: linear-gradient(left, red 50%, white 50%, white);
  background-size: 200%;
  background-position-x: 100%;
  transition: .5s linear;
}
#navbar li a:hover:after {
  width: 100%;
  background-position-x: 0%;
}

使用<div id="nav"> <ul id="navbar"> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> </ul> </div>和overflow:hidden

的其他方法

left

#navbar li {
  display: inline-block;
  padding: 15px;
}
#navbar li a {
  display: block;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
}
#navbar li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: red;
  transition: .5s linear;
}
#navbar li a:hover:after {
  left: 0;
}

Answer 2

您可以在this tutorial on the awesome Codrops website中找到这些效果以及更多效果。

A demo here.

如上所述，所有这些都依赖于pusedo元素。

  

如果您看一下Kukuri效果，您会看到，在悬停时，从左侧滑入显示一个条形。此栏将沿着我们打包到:: before伪元素的文本的彩色版本“拖动”。我们将栏的初始位置设置为我们设置为溢出的链接框之外：隐藏。

一旦你明白了，从头开始实施它们应该很简单。

Answer 3

您正在寻找的是CSS Transitions

在JavaScript.com上获得该效果，他们使用的是边框底部而不是文本修饰。

请考虑以下事项：

a{
    border-bottom:2px solid transparent;
    transition:border 0.5s ease-in-out;
}

a:hover {
    border-bottom:2px solid #fff;
    text-decoration:none;
}

Answer 4

使用CSS :after制作下划线：

a {
  color:#00f;
  text-decoration:none;
  display:inline-block;
}
a:after {
  width: 0;
  display:block;
  background:#00f;
  height:3px;
  transition: all .5s ease-in-out;
  content:"";
}
a:hover {
  color:#00f;
}
a:hover:after {
  width:100%;
}

<a href="#">Click here</a>