Новогодняя гирлянда с качающимися шариками в шапку Blogger, Блогспот

Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)

Я почти был уверен, что опубликовал лучшие украшения Рунета к Новому году, на Блогспот, Блоггер:

Виджет информер времени "До Нового года осталось"

Снежинки и снежную пыль для блога

Новогодняя шапка блога Блогспот, Blogger.

Новогоднее поздравление анимированного Деда Мороза

Праздничный салют, фейерверк на Блогспот, Blogger

Но заглянув на блог:

http://delitant.ru/wordpress/kak-ukrasit-sajt-k-novomu-godu-2-krasivaya-girlyanda.html

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

Добавил колокольчики по бокам, а вот шариков стало меньше. Из за них, слишком большой код получается.

Устанавливается гирлянда очень просто.
Дизайн - Добавить гаджет - HTML/JavaScript вставляется следующее:

<style type="text/css">
.st2 {

border:3px solid #BBBBBB;opacity: 2.1;
-webkit-animation: ring 18s 19s ease-in-out infinite;
-webkit-transform-origin: 50% 14px;
-moz-animation: ring 18s 19s ease-in-out infinite;
-moz-transform-origin: 50% 14px;
animation: ring 18s 19s ease-in-out infinite;
transform-origin: 50% 14px;
}

@-webkit-keyframes ring {
0% { -webkit-transform: rotateZ(0); }
1%, 9% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
0% { -moz-transform: rotate(0); }
1%, 9% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}

@keyframes ring {
0% { transform: rotate(0); }
1%, 9% { transform: rotate(30deg); }
3% { transform: rotate(-28deg); }
5% { transform: rotate(34deg); }
7% { transform: rotate(-32deg); }
9% { transform: rotate(30deg); }
11% { transform: rotate(-28deg); }
13% { transform: rotate(26deg); }
15% { transform: rotate(-24deg); }
17% { transform: rotate(22deg); }
19% { transform: rotate(-20deg); }
21% { transform: rotate(18deg); }
23% { transform: rotate(-16deg); }
25% { transform: rotate(14deg); }
27% { transform: rotate(-12deg); }
29% { transform: rotate(10deg); }
31% { transform: rotate(-8deg); }
33% { transform: rotate(6deg); }
35% { transform: rotate(-4deg); }
37% { transform: rotate(2deg); }
39% { transform: rotate(-1deg); }
41% { transform: rotate(1deg); }
43% { transform: rotate(0); }
100% { transform: rotate(0); }

</style>

<div style="padding: 0px;">
<img class="st2" src="http://lovitour.com.ua/img/newyear/b-ball_n2.png" style="position:fixed; top: 0px;left:130px;border:none;z-index:9;"/></div><style type="text/css">
.st1 {

border:3px solid #BBBBBB;opacity: 2.1;
-webkit-animation: ring 20s 19s ease-in-out infinite;
-webkit-transform-origin: 50% 14px;
-moz-animation: ring 20s 19s ease-in-out infinite;
-moz-transform-origin: 50% 14px;
animation: ring 20s 19s ease-in-out infinite;
transform-origin: 50% 14px;
}

@-webkit-keyframes ring {
0% { -webkit-transform: rotateZ(0); }
1%, 9% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
0% { -moz-transform: rotate(0); }
1%, 9% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}

@keyframes ring {
0% { transform: rotate(0); }
1%, 9% { transform: rotate(30deg); }
3% { transform: rotate(-28deg); }
5% { transform: rotate(34deg); }
7% { transform: rotate(-32deg); }
9% { transform: rotate(30deg); }
11% { transform: rotate(-28deg); }
13% { transform: rotate(26deg); }
15% { transform: rotate(-24deg); }
17% { transform: rotate(22deg); }
19% { transform: rotate(-20deg); }
21% { transform: rotate(18deg); }
23% { transform: rotate(-16deg); }
25% { transform: rotate(14deg); }
27% { transform: rotate(-12deg); }
29% { transform: rotate(10deg); }
31% { transform: rotate(-8deg); }
33% { transform: rotate(6deg); }
35% { transform: rotate(-4deg); }
37% { transform: rotate(2deg); }
39% { transform: rotate(-1deg); }
41% { transform: rotate(1deg); }
43% { transform: rotate(0); }
100% { transform: rotate(0); }

</style>

<div style="padding: 0px;">
<img class="st1" src="http://lovitour.com.ua/img/newyear/b-ball_n4.png" style="position:fixed; top: 0px;left:250px;border:none;z-index:6;"/></div><style type="text/css">
.st {

border:3px solid #BBBBBB;opacity: 2.1;
-webkit-animation: ring 19s 19s ease-in-out infinite;
-webkit-transform-origin: 50% 14px;
-moz-animation: ring 19s 19s ease-in-out infinite;
-moz-transform-origin: 50% 14px;
animation: ring 19s 19s ease-in-out infinite;
transform-origin: 50% 14px;
}

@-webkit-keyframes ring {
0% { -webkit-transform: rotateZ(0); }
1%, 9% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
0% { -moz-transform: rotate(0); }
1%, 9% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}

@keyframes ring {
0% { transform: rotate(0); }
1%, 9% { transform: rotate(30deg); }
3% { transform: rotate(-28deg); }
5% { transform: rotate(34deg); }
7% { transform: rotate(-32deg); }
9% { transform: rotate(30deg); }
11% { transform: rotate(-28deg); }
13% { transform: rotate(26deg); }
15% { transform: rotate(-24deg); }
17% { transform: rotate(22deg); }
19% { transform: rotate(-20deg); }
21% { transform: rotate(18deg); }
23% { transform: rotate(-16deg); }
25% { transform: rotate(14deg); }
27% { transform: rotate(-12deg); }
29% { transform: rotate(10deg); }
31% { transform: rotate(-8deg); }
33% { transform: rotate(6deg); }
35% { transform: rotate(-4deg); }
37% { transform: rotate(2deg); }
39% { transform: rotate(-1deg); }
41% { transform: rotate(1deg); }
43% { transform: rotate(0); }
100% { transform: rotate(0); }

</style>

<div style="padding: 0px;">
<img class="st1" src="http://lovitour.com.ua/img/newyear/b-ball_n4.png" style="position:fixed; top: 0px;right:310px;border:none;z-index:5;"/></div>
<img class="st2" src="http://lovitour.com.ua/img/newyear/b-ball_n3.png" style="position:fixed; top: 0px;right:920px;border:none;z-index:5;"/>
<img class="st1" src="http://lovitour.com.ua/img/newyear/b-ball_n2.png" style="position:fixed; top: 0px;right:770px;border:none;z-index:7;"/>
<img class="st" src="http://lovitour.com.ua/img/newyear/b-ball_n3.png" style="position:fixed; top: 0px;right:620px;border:none;z-index:9;"/>
<img class="st" src="http://lovitour.com.ua/img/newyear/b-ball_n2.png" style="position:fixed; top: 0px;right:470px;border:none;z-index:9;"/>
<img class="st2" src="http://lovitour.com.ua/img/newyear/b-ball_n3.png" style="position:fixed; top: 0px;right:170px;border:none;z-index:9;"/>
<img src="http://lovitour.com.ua/img/newyear/christmas-icon.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:9;"width="140"/>
<img src="http://lovitour.com.ua/img/newyear/212012.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>
<img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:1;"/>
<img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:210px;border:none;z-index:5;"/>
<img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:510px;border:none;z-index:5;"/>
<img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:810px;border:none;z-index:5;"/>
<img src="http://lovitour.com.ua/img/newyear/b-head-decor_newyear.png" style="position:fixed; top: 0px;right:1110px;border:none;z-index:5;"/>

© blogodel.com

Не надо боятся, что код очень большой. Как видите, у меня все работает!

Обо мне

Curriculum
vitae:

Родился, жил (не привлекался), умер!
Да нет, вроде жив пока!
Очень надеюсь, что достиг уровня Homo sapiens (и не являюсь всего лишь - Homo erectus). Определенное место жительство имеет место быть - в населенном пункте, трудно различимом на карте.
Блог создан для трансформации редких мыслей в графическую форму.
Использую диплом ВУЗа в качестве коврика для компьютерной мышки!
Основная деятельность - занимаюсь упорядочиванием хаоса до уровня смыслов. Примерно до 8 вечера, потом устаю.
Будучи человеком исключительной скромности, я максимально сократил размер публикации своей автобиографии, полагая неприличным навязывать ее чтение незнакомым мне людям! Если вы нашли орфографические ошибки в моих сообщениях. Берите спокойно себе, мне не жалко...