Открытка

Источник

Как красиво оформить свой блог к ​​празднику? Как сделать так что бы, на смену унылому однообразию будничных дней, на ваш сайт пришло предвкушение чего то особенного, того что повысит настроение не только вам, но и вашим читателям

 

Предлагаемый скрипт для блогов на платформе блогспот. Для тех, кто просто желает вставить анимированную открытку на любой сайт, в конце статьи можете найти варианты с простым кодом. 

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

 

Итак приступим к делу! Скрипт размещается благодаря гаджету HTML / JavaScript. Для этого проследуйте Дизайн> Добавить гаджет и после того, как вы нажали добавить гаджет, выбирайте рубрику - HTML / JavaScript. В открывшееся окно, вставляете скопированный ниже код и жмете сохранить.

 

 

На том месте, где красная маркировка, можете всавить урл. (Адрес) любой картинки, а размер можно регулировать, там где зеленая маркировка.

 

<Дел каталог = "л" стиль = "выравнивания текста: слева;" trbidi = "на">


<тип стиля = "текст / CSS">
 .st {
 ширина: 150 PX;
 границы: 3px твердое #BBBBBB; непрозрачность: 2,1;
 -webkit-анимация: кольцевые 68s 9s легкость в-из бесконечного;
 -webkit-преобразовании происхождения: 50% 14px;
 -moz-анимации: кольцевые 68s 9s легкость в-из бесконечного;
 -moz-преобразовании происхождения: 50% 14px;
 анимация: кольцевые 68s 9s легкость в-из бесконечного;
 преобразования -origin: 50% 14px;
}


@ -webkit-ключевые кадры кольцо {
 0% {-webkit-преобразования: rotateZ (0); }
 1% {-webkit-преобразования: rotateZ (30 градусов); }
 3% {-webkit-преобразования: rotateZ (-28deg); }
 5% {-webkit-преобразования: rotateZ (34deg); }
 7% {-webkit-преобразования: rotateZ (-32deg); }
 9% {-webkit-преобразования: rotateZ (30 градусов); }
 11% {-webkit-преобразования: rotateZ (-28deg); }
 13% {-webkit-преобразования: rotateZ (26deg); }
 15% {-webkit-преобразования: rotateZ (-24deg); }
 17% {-webkit-преобразования: rotateZ (22deg); }
 19% {-webkit-преобразования: rotateZ (-20deg); }
 21% {-webkit-преобразования: rotateZ (18deg); }
 23% {-webkit-преобразования: rotateZ (-16deg); }
 25% {-webkit-преобразования: rotateZ (14deg); }
 27% {-webkit-преобразования: rotateZ (-12deg); }
 29% {-webkit-преобразования: rotateZ (10 градусов); }
 31% {-webkit-преобразования: rotateZ (-8deg); }
 33% {-webkit-преобразования: rotateZ (6deg); }
 35% {-webkit-преобразования: rotateZ (-4deg); }
 37% {-webkit-преобразования: rotateZ (2DEG); }
 39% {-webkit-преобразования: rotateZ (-1deg); }
 41% {-webkit-преобразования: rotateZ (1deg); }
 43% {-webkit-преобразования: rotateZ (0); }
 100% {-webkit-преобразования: rotateZ (0); }
 }
 .st: наведите {
 ширина: 400px;
 маржи-вниз: -06px;
 }

</ стиль>
<оставили> </ влево>
<дел стиль = "обивка: 0px;">
<класс Попадания = "ул" SRC = " http://s017.radikal.ru/i440/1202/4c/0b91309b9756.gif "название =" название # 1 "/> </ дел>
</ дел>

 

Для тех, кто просто желает поместить открытку на свой сайт или, у кого блоги не на блогспот (других платформах) предлагаю коды. Картинки размером в два раза больше и если желаете точно такой же размер, как опубликовано ниже, обратитесь в комментариях!

Анимированные фотографии к 8 марта. Кликните на эту строку, что бы увидеть открытки!

 

<a href='http://games.businesskey.com.ua/articles31.html'> <IMG SRC = "http://games.businesskey.com.ua/images/открытка2.gif" /> </ >

 

<a href='http://games.businesskey.com.ua/articles32.html'> <IMG SRC = "http://games.businesskey.com.ua/images/открытка7.gif" /> </ >

<a href='http://games.businesskey.com.ua/articles31.html'> <IMG SRC = "http://games.businesskey.com.ua/images/открытка3.gif" /> </ >

<a href='http://games.businesskey.com.ua/articles31.html'> <IMG SRC = "http://games.businesskey.com.ua/images/открытка4.gif" /> </ >    

<a href='http://games.businesskey.com.ua/articles31.html'> <IMG SRC = "http://games.businesskey.com.ua/images/открытка5.gif" /> </ >  

<a href='http://games.businesskey.com.ua/articles31.html'> <IMG SRC = "http://games.businesskey.com.ua/images/открытка6.gif" /> </ >