Наш опрос
Вы добавили нас в закладки?
Всего ответов: 23
Случайный анекдот
111 Прилетел Змей Горыныч в деревню и говорит крестьянам: - Чтоб через неделю был собран обоз с золотом, иначе - всем хана! Собрались крестьяне мыслями, и пошли к Илье Муромцу... - Илья, змей прилетел, сказал золота обоз ему через неделю или всем хана! Выручай! - Ну, тут думать надо - говорит Илья. - Сколько думать то, Илюш? - Месяц думать надо. - Да ну тебя, помрем быстрей... И пошел народ к Добрыне Никитичу... - Добрыня, выручай, змей-золото-неделя... - Ну тут думать надо. - молвит Добрыня. - Сколько думать то? - Ну, недели две думать... - да ну тебя, помрем быстрей... Пошли они к Алеше Поповичу... - Алеша выручай, змей - золото – неделя - хана всем... Алеша вскакивает, берет меч, щит, запрыгивает на коня.... Народ в след: - Алеша, а как же думать??? - А х#ли тут думать – съ#бывать надо!!!
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

» Сегодня нас посетили:
» Зарег. на сайте
Всего: 3486
Новых за месяц: 1
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 177
Авторизованных: 3305

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



Сегодня научимся создавать эффект трансформации ссылок при наведении на них, при помощи 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);  
  }


Теперь всем ссылкам придаем класс cpojer-links, как показано на примере ниже
Код

<div class="cpojer-links">
  <a href="http://in.ucoz.org/">in.uСoz.org</a><br>
  <a href="http://in.ucoz.org/news/">Скрипты - in.uСoz.org</a>
</div>


Html редактор
Автор: Prosvetekvator
Просмотров: 9147
23.06.2013


Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка:
BB-code:
HTML:


« Пред. Трансформация ссылок с помощью CSS След. »


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Мини-чат
Топ пользователей
Новое на форуме








Комментарии
11.06.2022