Главная » CMS » Красивая трансформация ссылок с помощью CSS

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

Недавно посещая сайт одного из разработчиков MooTools (Christoph Pojer) я заметил классный эффект при наведении мышкой на ссылку. Ссылка как будто оживала и наклонялась немного то вправо, то влево. Эффект усилила замена фона при наведении мышкой на линк. Я сразу же открыл исходной код страницы и начал искать какие-то признаки JavaScript, что бы увидеть, каким образом он создал этот эффект. Но, я ничего так и не нашел. И только потом я понял, что всё это было реализовано всего лишь с помощью CSS. Сейчас я научу и тебя, как это сделать.

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);
}

HTML:

Весьма стильный эффект, не требующий большого количества кода.
Поэкспериментируй и добейся того результата, который нужен именно тебе.

Mr. Freeman, part 24

На правах рекламы!
Швидка і недорога . Саме цим питанням задаються молоді бізнесмени. Багато ризиків бути обдуреним. Тому, в цьому питанні, краще довіритися професіоналам.

Запись опубликована в рубрике CMS с метками , , . Добавьте в закладки постоянную ссылку.

4 комментария: Красивая трансформация ссылок с помощью CSS

  1. говорит:

    Ну такое. не под каждый сайт подойдет, но за пост спасибо, как всегда радуешь ;)

  2. говорит:

    прикольный эффект! Виктор, спасибо за урок! )

  3. Eldarik говорит:

    а как сделать чтобы и IE хавал эти стили…опера классно отображает, а вот IE не хочет, показывает просто синие прямоугольники

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>