Привет. Я не давно делал интересный hover эффект на одном из проектов, это подчеркнутый текст. Когда вы наводите на элемент линия начинает появляется с центра к краям. Смотрим демо ниже.
Создать этот эффект не составит труда, нам не придется использовать дополнительную разметку, только ссылка. Плюс еще в том, что в браузерах которые не поддерживают css анимацию, это будет выглядеть как простое подчеркивание у ссылки.
Первое что нам нужно сделать это выключить text-decoration
, и установить ссылке свойство position
в relative
. Так же нужно задать одинаковый цвет для ссылки в обычном состоянии и в состоянии hover.
h2 { background-color: #000; padding: 10px; } h2 > a { position: relative; color: #fff; } h2 > a:hover { color: #fff; text-decoration: none; cursor: pointer; }
Далее, мы добавляем border
, и скрываем его с помощью трансформации. Все это мы сделаем с помощью :before
. Для скрытия в tramsform
устанавливаем значение scaleX(0)
. Еще нужно перестраховаться, и добавить visibility: hidden
, для браузеров которые не поддерживают css анимацию.
h2 > a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #fff; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
И последнее мы оживим анимацию, для состояния hover, анимация будет с задержкой в 0.3 секунды.
h2 > a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }
Вот и все, hover эффект готов, правда очень просто? Если вам нужна поддержка старых версий Firefox и Opera вы можете к transform добавить префиксы -moz-
и -o-.
Если вам понравился урок, поделитесь им с друзьями в социальных сетях, кнопки ниже. И подписывайтесь на наши группы в соц. сетях facebook, vkontakte и канал на ютубе. Пока.
comments powered by HyperComments