Всем привет!
Недавно у меня был заказ и нужно было сделать, чтобы ярлыки висели над кнопкой «Акция».
Но это должны были быть не просто ярлыки, а при наведении на них мышкой, они должны были покачиваться.
Вот такое получилось:
Естественно, это просто картинка и эффекта покачивания вы не увидите, так как тут много дополнительных стилей, которые вам будут просто мешать.
Потому решил скинуть обычный код без лишнего, а вы под свои потребности уже все необходимое подставите.
[ демонстрация ]
Теперь сам код:
HTML:
<img src="bloggood_ru.png" class="swing1"> <img src="bloggood_ru.png " class="swing2"> <img src="bloggood_ru.png " class="swing3">
«swing1», «swing2» и «swing3» - эти классы предопределяют, какой эффект должен быть.
CSS:
@-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); -ms-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); -ms-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); -ms-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); -ms-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); -ms-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing1:hover { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } .swing2:hover { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation-name: swing; animation-name: swing; } .swing3:hover { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-animation-name: swing; animation-name: swing; }
Все, проверяйте и смотрите результат!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 314790 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 262653 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 188847 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 182180 -
Как включить или отключить Aero в Windows 7
Дата: 1 июня 2013
Прокомментировано:6
просмотров: 154349
Добавить комментарий
Метки: css, html, Вебмастеру, для сайта, эффекты для сайта
смешно звучит!!! Сам WP и плагины из файлов php. Если хотите безопасность, используйте…
⇒ Открыть статью ⇐