Как анимировать линию на линии hover

Question

Как сделать анимацию подчеркивания, подобную этой, в https://www.javascript.com/ при наведении указателей на навигацию?

Я не знаю, как это сделать, поэтому у меня еще нет кода!

Я знаю, как писать @keyframes из CSS3, но я не знаю, как создать такую ​​анимацию.

<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

Я использовал :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; 
 
}

<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>

Answer 2

Вы можете найти эти эффекты и многое другое в this tutorial on the awesome Codrops website.

A demo here.

Все они, как уже упоминалось, полагаются на pusedo элементов.

Если вы посмотрите на эффект Кукури, вы увидите, что при наведении курсора появляется стрелка слева. Этот бар будет «перетаскивать» по цветной версии текста, который мы упаковываем в элемент :: before pseudo. Мы устанавливаем начальное положение панели вне поля ссылки, которое мы устанавливаем на переполнение: скрыто.

Должно быть просто реализовать их с нуля, как только вы получите эту идею.

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>