• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Подчеркивание текста с наведением курсора (Плавное подчеркивание ссылки при наведении курсора на ссылку)
Подчеркивание текста с наведением курсора
Kosten
Дата: Понедельник, 2019-05-06, 02:49 | Сообщение 1
Администраторы
Сообщений:23569
Награды: 56


В сети интернет мы видели много интересных эффектов, где идут под текстовые ссылки, но в этой статье есть еще один вариант, где может удивить веб мастера, у которого темный дизайн сайта. Это чистый 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; }
}


Демонстрация
Прикрепления: 2391795.png(15.1 Kb) · vesac.zip(1.7 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Подчеркивание текста с наведением курсора (Плавное подчеркивание ссылки при наведении курсора на ссылку)
  • Страница 1 из 1
  • 1
Поиск: