Эффект появляющейся картинки

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

Мне попадались сайты где, таким образом появляется изображение какого-то продающего продукта. Картинка всплывала в сайдбаре блога и очень привлекала внимание. В  Блоггере установить это можно через гаджет HTML/JavaScript. Или как в моём случае, непосредственно на странице поста, перейдя в самом редакторе сообщения на режим HTML.

Код.

<style>.izo {
height: 0px;
padding: 1px;
-webkit-animation-name: movearound;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease;
}@-webkit-keyframes movearound {
from {
width: 0px;
background: #ccc;
opacity: 0.3;
-webkit-transform: scale(0.1) rotate(360deg);}
to {width: 0px;background: #ffffff;opacity: 1;
-webkit-transform: scale(1) rotate(360deg);}</style>
<div class="izo">
<a href="Адрес страницы (URL ) "><img border="0" src="Путь к картинке(URL )" /></a></div>

Вот и весь фокус. Если нашли применение смело экспериментируйте. Размеры картинки можно изменить обычным способом прямо в редакторе. Ещё красивые эффекты для изображений.

Всё сегодня. Спасибо, что заглянули. Удачи всем.

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

Введите Ваш email