Inter-Net.PRO

css эффект

  Хочу сегодня поделиться с вами не сложным, но очень популярным и часто встречаемым на сайтах CSS эффектом.

  Данный эффект - это плавно появляющаяся подчёркивающая линия, которая появляется при наведении на ссылку или пункт меню. Но этот эффект можно применять не только для ссылок или пунктов меню, но и для чего угодно: для заголовков и названий, отдельных частей текста, иконок, картинок и т.д.


Анимация с подчёркивающей линией

Линия появляющаяся слева направо

  Первый CSS эффект который я покажу, это плавно появляющаяся слева направо подчёркивающая линия.


 Демо:


  Для примера я взял простую по html конструкцию - родительский элемент с классом link-hover-solid , внутри которого идут ссылки - a. По такому же принципу устроено меню с его пунктами.

HTML-код:

<div class="link-hover-solid">
    <a href="#">FontAwesome</a> <a href="#">Генератор кнопок</a>
</div>

 

CSS-код отвечающий за анимацию:

.link-hover-solid a {
    display: inline-block;
    color:#76431f;
    line-height: 1;
    text-decoration:none;
    cursor: pointer;
}
.link-hover-solid a:after {
    background-color: #ff6000;
    display: block;
    content: "";
    height: 3px;
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
.link-hover-solid a:hover:after,
.link-hover-solid a:focus:after {
    width: 100%;
}

 


Подчёркивающая линия появляющаяся из центра

  Этот эффект особо популярен для пунктов главного горизонтального меню на сайте.


Демо:


 CSS-код эффекта:

.link-hover-center a {
    display: inline-block;
    color:#07aa19;
    line-height: 1;
    text-decoration:none;
    cursor: pointer;
    position:relative;
}
.link-hover-center a:after {
    display: block;
    content: "";
    background-color: #07aa19;
    height: 3px;
    width: 0%;
    left:50%;
    position:absolute;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    transform:translateX(-50%);
}
.link-hover-center a:hover:after,
.link-hover-center a:focus:after {
    width: 100%;
}

 


 Чтобы внедрить данные эффекты у себя на сайте, нужно просто поменять в CSS-коде классы родительского элемента, на классы со своего сайта.

  Если у вас с этим проблемы, можете оставлять вопросы в комментариях - я неприменно вам помогу. Ну и от слов благодарности я тоже не откажусь : )

 

Авторизация

Войти через соцсети: