Навигатор

Шаблоны для Joomla
Шаблоны для uCoz
Категории раздела
Профиль для ucoz [9]
Новый профиль для ucoz, мини профиль для ucoz, скрипт для ucoz профиль, профиль для сайта ucoz
Ajax для ucoz [13]
Ucoz ajax, ajax окна для ucoz, скрипты ajax для ucoz, новые ajax окна для ucoz, новый вид ajax ucoz
Скрипты для ucoz [128]
скачать скрипты для ucoz, скрипты ucoz
Меню для ucoz [45]
меню для ucoz, горизонтальное меню для ucoz, раздвижное меню ucoz, вертикальное, выпадающие меню ucoz
Календари для ucoz [20]
скрипт календарь cs, скрипт для ucoz календарь, календарь для ucoz cs 1.6, календари ucoz
Часы для ucoz [31]
часы для ucoz, часы для ucoz cs 1.6
Статистика для ucoz [11]
статистика cs для ucoz
Форма входа для ucoz [15]
форма входа для ucoz
Переключатели для ucoz [9]
Переключатели страниц для ucoz
Шапки для ucoz [13]
шапки для ucoz cs 1.6
Интересное
Мини профиль + Форма входа
Рейтинг: 66625
Красивое горизонтальное меню для ucoz
Рейтинг: 54025
Мини-чат для ucoz
Рейтинг: 48466
Скрипт мониторинга cs серверов
Рейтинг: 43508
Слайдер новостей для uCoz
Рейтинг: 18600
  1. Главная
  2. Скрипты для ucoz
  3. Скрипты для ucoz
  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>
Автором такого стиля ссылок является Christoph Pojer – MooTools разработчик
Категория Скрипты для ucoz | Добавил: Wallaby | Просмотров: 3617 |

Комментарии отсутствуют

по актуальности
Чтобы оставить комментарий, необходимо или