Изображения качающиеся, повороты и другие эффекты

---

Приветствую гостей и читателей блога. Сегодня у нас работа с изображениями, а точнее будем задавать разные эффекты: поворот, качающиеся, двигающиеся вправо или влево и.т.д, чтобы обратить на картинки в наших блогах внимание посетителей. На этой странице начало разных эффектов изображений. Сами понимаете, все не смогу здесь показать (слишком большая нагрузка для одной страницы), поэтому внизу поста ссылка на тестовый блог.

Качающаяся картинка

<img class="swing" src="https://2.bp.blogspot.com/-Pk2GVBKT1rc/VM8nVBDLskI/AAAAAAAAHKE/u46EjsJZ70c/s1600/widescreen_287_opt.jpg"width="280"height="280" />

 <style>

.swing{

 -webkit-animation:swinging 10s ease-in-out 0s infinite;

 -moz-animation:swinging 10s ease-in-out 0s infinite;

 animation:swinging 10s ease-in-out 0s infinite;

 -webkit-transform-origin:50% 0;

 -moz-transform-origin:50% 0;

 transform-origin:50% 0;

}

@-webkit-keyframes swinging{

 0% { -webkit-transform: rotate(0); }

 5% { -webkit-transform: rotate(10deg); }

 10% { -webkit-transform: rotate(-9deg); }

 15% { -webkit-transform: rotate(8deg); }

 20% { -webkit-transform: rotate(-7deg); }

 25% { -webkit-transform: rotate(6deg); }

 30% { -webkit-transform: rotate(-5deg); }

 35% { -webkit-transform: rotate(4deg); }

 40% { -webkit-transform: rotate(-3deg); }

 45% { -webkit-transform: rotate(2deg); }

 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

 100% { -webkit-transform: rotate(0); }

}

@-moz-keyframes swinging{

 0% { -moz-transform: rotate(0); }

 5% { -moz-transform: rotate(10deg); }

 10% { -moz-transform: rotate(-9deg); }

 15% { -moz-transform: rotate(8deg); }

 20% { -moz-transform: rotate(-7deg); }

 25% { -moz-transform: rotate(6deg); }

 30% { -moz-transform: rotate(-5deg); }

 35% { -moz-transform: rotate(4deg); }

 40% { -moz-transform: rotate(-3deg); }

 45% { -moz-transform: rotate(2deg); }

 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

 100% { -moz-transform: rotate(0); }

}

@keyframes swinging{

 0% { transform: rotate(0); }

 5% { transform: rotate(10deg); }

 10% { transform: rotate(-9deg); }

 15% { transform: rotate(8deg); }

 20% { transform: rotate(-7deg); }

 25% { transform: rotate(6deg); }

 30% { transform: rotate(-5deg); }

 35% { transform: rotate(4deg); }

 40% { transform: rotate(-3deg); }

 45% { transform: rotate(2deg); }

 50% { transform: rotate(0); }

 100% { transform: rotate(0); }

}

</style>

Можно вставить качающийся баннер своего блога или партнерской программы

В коде до <style> вставляете код баннера

<a href="партнерская ссылка"><img class="swing" src="url адрес баннера"width="468"height="60" /></a>

Выделенное синим-адрес ссылки партнерской программы или блога; коричневым-адрес баннера (картинки); красным-размеры баннера; Другие эффекты с изображениями смотрите в тестовом блоге

Вы можете устанавливать код изображений гаджетом в боковые панели дизайн-добавить гаджет, или на страницах блога (вкладка HTML в редакторе сообщений). Да, не во всех браузерах и шаблонах корректно отображаются такие эффекты с изображениями.

И у меня на сегодня вся информация. Задавайте вопросы в комментариях или воспользуйтесь контактной формой для связи, если что то будет не понятно с установкой. Буду благодарна за плюсик в социальных сетях. Всем пока и всего доброго.

Почитайте новый пост:  Как при наведении мыши получить эффект изображения круглой или овальной формы;

Рекомендуемый контент: