Покачивание изображения при наведении курсора

Привет, друзья. У меня был пост как сделать качающуюся картинку в блоге при наведении на неё курсора.  Вот недавно один мой подписчик спрашивал, как таких раскачивающихся картинок установить несколько. Сложного нет ничего. Так же, используя свойство keyframes и CSS трансформацию, которая и позволит  раскачивать, поворачивать и масштабировать  картинки в разных вариантах.

ЭТО ТОЛЬКО ИЗОБРАЖЕНИЕ

Много слов писать не буду. Просто для начала скопируйте, приведённый ниже код и просмотрите его в этом редакторе. Обратите внимание, что каждое изображение раскачивается по разному.

Для начала мы создадим 3 класса, назовём их  swing1, swing2,  swing3. Зададим нужную ширину и высоту. А затем общие стили CSS и отдельно для каждой картинки.

<img class="swing1" height="400" src="https://i.pinimg.com/originals/5c/ef/50/5cef5092d4a89b8fa571be2f05723245.png" width="350" />

<img class="swing2" height="400" src="https://i.pinimg.com/originals/5c/ef/50/5cef5092d4a89b8fa571be2f05723245.png" width="350" />

<img class="swing3" height="400" src="https://i.pinimg.com/originals/5c/ef/50/5cef5092d4a89b8fa571be2f05723245.png" width="350" />
 <style>
@-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;
}
</style>

Вставляем нужные адреса картинок в строках

https://i.pinimg.com/originals/5c/ef/50/5cef5092d4a89b8fa571be2f05723245.png

Меняем по необходимости размер. Каждый из вариантов я отметила разным цветом. Если нужно 3, копируйте код целиком. Можно оставить и 2, и 1, соответственно, убрав лишние. На ваше усмотрение. Так же можно разместить любые баннеры, или сделать качающийся текст. Код вставляем в тело сообщения в формате HTML или в гаджет HTML/JavaScript. 

Всем добра и до встречи. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email