Как сделать качающуюся картинку или баннер в блоге

Здравствуйте, мои дорогие читатели и гости блога. Поделюсь с вами, как можно заставить картинку "покачаться" из стороны в сторону. Такой эффект можно применить не только к картинкам в сообщении, но и к любому баннеру.Что, несомненно, привлечёт большее внимания к нему.

 Как выглядит таковой можно увидеть на тестовом блоге.

Делать мы это будем с использованием CSS, а сам процесс реализации настолько прост, что вы легко с этим справитесь. Я не думаю, что стоит подобный эффект использовать постоянно. Можно заставить один баннер или картинку оживить. Решать вам. Всё же рассмотрим и тот и другой вариант. Для начала нам понадобиться вот такой код

<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); } /* Come  to rest at 50%. The rest is just stillness */
 100% { transform: rotate(0); }
}

</style>

Теперь, если решили что будем раскачивать какую-то определённую картинку, делаем следующее. После того, как написали сообщения перейдём из режима создать в режим HTML

и вставляем его в самом конце. А в том месте, где хотим видеть изображение нужно вставить следующий код вызова.

<img class="swing" src="Адрес картинки или баннера" />

Вот и все дела. Если уже постоянно с этим длинным кодом возиться не захочется, то тогда его можно установить непосредственно в шаблон блога. Как обычно. Вкладка дизайн-изменить HTML. Находим заветную строку  ]]></b:skin> и перед ней вставляем его. Только здесь необходимо убрать из кода <style> и </style>. Я выделила их синим цветом. А с самой картинкой в сообщении поступаем так же.

Кому интересно узнать, как сделать изображения в блоге круглой формы вот пост об этом .

А мне остаётся пожелать вам всего самого лучшего и расстаться на некоторое время.

Удачи всем нам.

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

введите пожалуйста свой адрес электронной почты :