Всё для Online игр и даже больше!
 
 
  • Страница 1 из 1
  • 1
Форум » Все Для Ucoz'a » Скрипты для ucoz » Эффект при наведении на ссылку
Эффект при наведении на ссылку
artimДата: Вторник, 20.11.2012, 14:49 | Сообщение # 1
Группа: Администраторы
Сообщений: 395
Награды: 4
Репутация: 4


Это не совсем относится к скрипты для ucoz, но решил все же поделиться. Интересный эффект, который происходит с ссылкой, при наведении курсора мыши на ссылку, она анимируется и немного смещается влево или вправо. Эффект создаётся только средствами CSS!

Этап 1. Вставляем код в 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);   
   }


Этап 2. Изменяем нужную ссылку
Теперь можно и придать ссылке прекрасного эффекта анимации, нужно лишь добавить к ссылкам:

Code

<div class="cpojer-links">Тут ссылка</div>


В результате у вас должно получиться так:

Code

<div class="cpojer-links">   
   <a href="http://wallaby.ucoz.ru/">Скрипты и Шаблоны для uCoz</a><br>   
   <a href="http://wallaby.ucoz.ru/">Скрипты и Шаблоны для uCoz</a>   
   </div>
Прикрепления: 8941101.png(8.8 Kb)

Оффлайн
Форум » Все Для Ucoz'a » Скрипты для ucoz » Эффект при наведении на ссылку
  • Страница 1 из 1
  • 1
Поиск: