X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> эффект при наведении на ссылку
AND1_rs
AND1_rs
Topic Starter сообщение 10.2.2012, 22:08; Ответить: AND1_rs
Сообщение #1


Интересный эффект, который происходит с ссылкой, при наведении курсора мыши на ссылку, она анимируется и немного смещается влево или вправо. Эффект создаётся только средствами CSS!
В самый низ, П.У - Дизайн - Управление дизайном(CSS):
<!--wallaby.ucoz.ru-->
.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);  
  }
<!--/-->

Теперь можно и придать ссылке прекрасного эффекта анимации, нужно лишь добавить к ссылкам:
<div class="cpojer-links">Тут ссылка</div>

В результате у вас должно получиться так:
<div class="cpojer-links">  
  <a href="http://wallaby.ucoz.ru/">Скрипты и Шаблоны для uCoz</a><br>  
  <a href="http://wallaby.ucoz.ru/">Скрипты и Шаблоны для uCoz</a>  
  </div>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
okijkee
okijkee
сообщение 10.2.2012, 22:09; Ответить: okijkee
Сообщение #2


Хорошая тема. Очень подойдет для новичков
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AND1_rs
AND1_rs
Topic Starter сообщение 10.2.2012, 22:10; Ответить: AND1_rs
Сообщение #3


Полностью с вами согласен :)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
6 stu999 1551 21.3.2024, 20:45
автор: stu999
Открытая тема (нет новых ответов) Размещу ссылку, статью, обзор на своих сайтах
Качественно и не дорого
3 Funoman 2413 12.10.2023, 13:27
автор: CryptoTims
Открытая тема (нет новых ответов) Получил странную ссылку при линкбилдинге
Как поведет себя поиск при обнаружении странной ссылке?
10 r0mZet 2178 24.10.2022, 19:23
автор: Wachowski
Горячая тема (нет новых ответов) 300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе!
65 inkon 30255 19.7.2022, 13:41
автор: Funoman
Горячая тема (нет новых ответов) тИЦ отменили! Новый показатель Яндекса ИКС! Лучшие площадки под размещение. Бесплатное написание статей при любом заказе.
Эксклюзивное предложение. Успей получить написание статей БЕСПЛАТНО
71 VIMstat 78310 21.6.2022, 9:38
автор: VIMstat


 



RSS Текстовая версия Сейчас: 29.3.2024, 0:33
Дизайн