WebWost WebWostbeta

Эффекты для ссылок

Различные анимационные эффекты для ссылок, которые помогут разнообразить ваш сайт

Al-Sher

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

Вот пример того, что должно у нас получиться:

Давайте сразу приступим к самому простому эффекту. HTML вид ссылки будет простым:

<a href="http://web-wost.ru" target="_blank">WebWost</a>

А теперь посмотрим CSS код:

a {
  color:#000;
  text-decoration:none;
  position:relative;
}
a:after {
  content: ' ';
  height:1px;
  width:0;
  left:0;
  background:#000;
  position:absolute;
  bottom:-1px;
  transition:width 0.2s ;
}
a:hover:after {
  width:100%;
}

Данный эффект создаст при наведении на ссылку нижнее подчеркивание, которое будет расширяться слева на право. За анимацию отвечает такое свойство, как transition. Чтобы анимация шла с права налево необходимо заменить left:0 на right:0 у a:after.

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

a:after {
content: ' ';
height:1px;
width:100%;
left:0;
background:#000;
position:absolute;
bottom:-1px;
transition: transform 0.2s;
transform:scaleX(0);
}
a:hover:after {
transform:scaleX(1);
}

Третим примером я хочу показать вам анимацию подчеркивания к центру. Принцип будет почти тот же, что и в первом примере, но в этот раз кроме after мы будем использовать еще и before. Вот такие стили вышли у меня:

a:after {
  content: ' ';
  height:1px;
  width:0;
  left:0;
  background:#000;
  position:absolute;
  bottom:-1px;
  transition:width 0.2s ;
}
a:before {
  content: ' ';
  height:1px;
  width:0;
  right:0;
  background:#000;
  position:absolute;
  bottom:-1px;
  transition:width 0.2s ;
}
a:hover:after,a:hover:before {
  width:100%;
}

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

a:after,a:before{
position:absolute;
content: ' ';
border-style:solid;
border-color:#000;
width:100%;
height:100%;
left:0;
top:0;
transition:transform 0.2s ease;
box-sizing:border-box;
}
a:after {
border-width: 1px 0;
transform:scaleX(0);
}
a:before{
border-width: 0 1px;
transform:scaleY(0);
}
a:hover:after{
transform:scale(1,1);
}
a:hover:before{
transform:scale(1,1);
}

На этом я хочу закончить с примерами анимаций для ссылок. Спасибо за внимание :)

0 Комментариев

Новый комментарий