Рубрика CSS

Трансформация ссылок с помощью CSS

Недавно я посетил сайт разработчика MooTools Developer Кристофа Пойэра и увидел интересный эффект. А именно, при наведении курсора мыши на ссылку  она трансформируется со смещением влево или вправо. Для усиления эффекта, цвет фона ссылки можно изменять. Данный трюк реализуется только средствами CSS без применения JavaScript!

CSS

.cpojer-links a    {
display: inline-block;
padding: 4px;
outline: 0;
color: #3a599d;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
background: #3a599d;
text-decoration: none;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}

Кристоф использовал функции перехода для каждого браузера так как каждый браузер имеет свой собственный префикс. Продолжительность перехода установлена в 250 миллисекунд, а масштабирование/вращение установлено по умолчанию. Состояние hover изменяет цвет фона (закругленные углы усиливают эффект), а масштаб/вращение меняет наклон ссылки. Наконец, изменение направления вращения улучшает стиль ссылки.

Эффект Кристофа является весьма творческим, и не требует большого количества кода. Это полезно знать, так как данный эффект реализуется только посредством CSS!

Источник: www.davidwalsh.name.
Перевод: Администратор сайта explorer-soft.com.