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



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

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






<img class="swing" src="http://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="http://1000-k.ru/op/go/olga14/p/1000el"><img class="swing" src="http://isif-life.ru/img/468x60.gif"width="468"height="60" /></a>

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


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

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




Автор статьи ✎ Olga Protasova Выпуск ✹ 2/02/2015 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Спасибо! Ольга,случайно зашла на Ваш блог и застряла.Много полезного для себя увидела.

    ОтветитьУдалить
    Ответы
    1. Римма, и Вам спасибо, что заглянули. А полезностей уже много написала для блогов blogspot, забегайте еще.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *