Дизайнерская трансформация ссылок с помощью CSS
6 из 10
Проголосовало: 2
Принаведении курсора мыши на ссылку, она анимируется и немного смещается влево или вправо. Для усиления эффекта изменяется фоновый цвет. Эффект создаётся только средствами CSS!
В CSS:
Code
.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);
}
Данный код вставляете туда куда вам надо:
Code
<div class="cpojer-links">
<a href="http://webo4ka.ru/" >Дизайнерская трансформация ссылок с помощью CSS</a>
</div>
Автор публикации: Загрузка
Загрузка
Источник: http://davidwalsh.name/css-transformations
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация |
Вход
Это моя работа, которая велась давольно таки давно

Времени было мало, поэтому я скачал полностью все, что было и сделал архив

111 мегабайт? wtf? Что в архив напихали?
Левое меню это BLG. Возможны какие-то баги, но в целом все должно работать корректно!
?
/* Скрывает каперайт ucoz */
.banner_u {
opacity:0.2 ;
}
/* ----------------- */
opacity:0.1 ; это легальное скрытее $POWERED_BY$
ставим в ccs не ставте 0.0 тоже за банят 1.1 можно сам пользуюсь.
11:39
Ответов:
1603 Написал:
AdminSB Дата:
14.09.2022 19:37
Ответов:
23 Написал:
arman02151 Дата:
27.04.2021 00:01
Ответов:
4 Написал:
doc74 Дата:
17.02.2020 20:54
Ответов:
0 Написал:
Betme Дата:
11.01.2020 10:00
Ответов:
3 Написал:
vover6 Дата:
24.12.2019 13:07
Ответов:
14 Написал:
vover6 Дата:
07.03.2019 18:37
Ответов:
8 Написал:
lizbeti4ek Дата:
21.02.2019 21:33
Ответов:
2 Написал:
CbIPoK2513 Дата:
15.05.2018 17:25
Ответов:
0 Написал:
CbIPoK2513 Дата:
13.05.2018
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Для проверки введите адрес сайта в форму ниже: