В сети интернет мы видели много интересных эффектов, где идут под текстовые ссылки, но в этой статье есть еще один вариант, где может удивить веб мастера, у которого темный дизайн сайта. Это чистый CSS эффект при наведении курсора на ссылки, где появится подчеркивание,
Что немного отличается от стандартного своим стилем, ведь дизайн идет под реальные точки, которые исполняют горизонтальную линию. В этом есть два разных эффекта, один трюк наведения проводной ссылки, а другой идет на подчеркивание, которое анимируется при наведении.
HTML
Код
<a class="dukopasmeges" href="#">Здесь идет название под клик</a>
CSS
Код
.dukopasmeges {
position: relative;
display: inline-block;
padding: 5px 0;
text-decoration: none;
color: #141415;
}
.dukopasmeges:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/xaswertub.jpg');
background-size: 120px 120px;
opacity: 0;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-animation: x-move 5s linear infinite;
animation: x-move 5s linear infinite;
}
.dukopasmeges:hover {
text-decoration: none;
}
.dukopasmeges:hover:after {
opacity: 1;
}
@-webkit-keyframes x-move {
0% { background-position: 0 0; }
100% { background-position: 120px 0; }
}
@keyframes x-move {
0% { background-position: 0 0; }
100% { background-position: 120px 0; }
}
Демонстрация
