Эффект покачивания изображения при наведении мыши
Эффект покачивания изображения при наведении мыши
Красивый эффект для оформления сайтов на случай какой-нибудь акции или распродажи. При наведении курсора мышки на бейджик, он начинает покачиваться. Никаких скриптов, вся анимация реализована исключительно средствами CSS.
Стили очень простые, как и сама анимация. При наведении курсора мыши осуществляется последовательное отклонение изображения на нужный угол от верхней центральной точки.
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .sale:hover {
- transform-origin: top center;
- animation-name: sale;
- animation-duration: 1s;
- animation-fill-mode: both;
- }
- @keyframes sale {
- 20% {
- transform: rotate3d(0, 0, 1, 15deg);
- }
- 40% {
- transform: rotate3d(0, 0, 1, -10deg);
- }
- 60% {
- transform: rotate3d(0, 0, 1, 5deg);
- }
- 70% {
- transform: rotate3d(0, 0, 1, 0deg);
- }
- 80% {
- transform: rotate3d(0, 0, 1, -5deg);
- }
- 90% {
- transform: rotate3d(0, 0, 1, -3deg);
- }
- 100% {
- transform: rotate3d(0, 0, 1, 0deg);
- }
- }
- </style>
Code (HTML) : Убрать нумерацию
- <img src="sale1.png" class="sale" />
- <img src="sale2.png" class="sale" />
Просмотров: 2552 | Комментариев: 0
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Комментариeв нет
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,347 раз
Поблагодарили 34,347 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |