Blog. Just Blog

Эффект покачивания изображения при наведении мыши

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект покачивания изображения при наведении мыши
Эффект покачивания изображения при наведении мыши

Красивый эффект для оформления сайтов на случай какой-нибудь акции или распродажи. При наведении курсора мышки на бейджик, он начинает покачиваться. Никаких скриптов, вся анимация реализована исключительно средствами CSS.

Стили очень простые, как и сама анимация. При наведении курсора мыши осуществляется последовательное отклонение изображения на нужный угол от верхней центральной точки.
  1. <style type="text/css">
  2. .sale:hover {
  3.     transform-origintop center;
  4.     animation-namesale;
  5.     animation-duration1s;
  6.     animation-fill-modeboth;
  7. }
  8.  
  9. @keyframes sale {
  10.     20% {
  11.         transformrotate3d(00115deg);
  12.     }
  13.     40% {
  14.         transformrotate3d(001, -10deg);
  15.     }
  16.     60% {
  17.         transformrotate3d(0015deg);
  18.     }
  19.     70% {
  20.         transformrotate3d(0010deg);
  21.     }
  22.     80% {
  23.         transformrotate3d(001, -5deg);
  24.     }
  25.     90% {
  26.         transformrotate3d(001, -3deg);
  27.     }
  28.     100% {
  29.         transformrotate3d(0010deg);
  30.     }
  31. }
  32. </style>
Верстка еще проще, просто изображения с указанием классов. Конечно, вы можете сделать какое угодно оформление, все зависит от поставленной задачи.
  1.     <img src="sale1.png" class="sale" />
  2.     <img src="sale2.png" class="sale" />
Опции анимации тут рассчитаны на современные браузеры, для лучшей обратной совместимости их желательно продублировать с префиксами "-webkit-", "-moz-" и "-ms-", тут я этого делать не стал. Рабочий пример вы можете посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 338 | Комментариев: 0

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2020
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0031 сек.) / Память: 4.75 Mb
Наверх