Новогодняя мотня в Blogger

Новогодняя гирлянда с мотающимися шарами

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

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

Смотреть демо-версию блога украшенного Новогодней мотней

Теперь переходим к установке всей этой мотающейся красоты на Blogger. Конечно, можно и на любой другой сайт. Вопрос в том, что на Blogger добавлять что-то стороннее всегда сложнее, т.к. нет доступа к файлам. Поэтому я и уточняю, что этот вариант именно для установки на блог созданный на платформе Blogspot.com.

В данном варианте, как и в предыдущем, все просто. В Гаджет 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>

Гаджет никак не называйте, потом после праздников удалите.
Все готово, наслаждайтесь!

15 комментариев

Unknown: Светлана, это просто чудо! Спасибо:); 20 декабря 2013 г. в 02:25
Светлана Ковалева: Согласна, Tata Gubanova. Пожалуйста!; 20 декабря 2013 г. в 10:08
Ирина: Вот спасибо!!! Такая красота получилась! Шапку менять не хотела, а новогоднее настроение нужно ведь как-то передать... Гирлянда и снег все решили! Спасибо!; 23 декабря 2013 г. в 16:18
Светлана Ковалева: Пожалуйста, Ирина, веселых праздников!; 24 декабря 2013 г. в 11:40
Nyukers: Неплохо! Получился облегченный вариант мотни от яндекса.; 30 декабря 2013 г. в 16:37
Tanja Warucha: Светлана, спасибо! Прекрасная работа :); 2 января 2014 г. в 03:24
avtomlm24: Замечательно Светлана! Благодарю Вас за такую находку или разработку!; 10 января 2014 г. в 14:16
Lana Bak: Спасибо за предновогоднее настроение!; 29 ноября 2014 г. в 23:09
Dossos: Спасибо!!!; 2 января 2015 г. в 20:52
Стадник Наталья Николаевна: Спасибо. Просто и оочень красиво; 15 декабря 2015 г. в 03:04
«Master Mebeli»: Спасибо! Супер!!!; 15 декабря 2015 г. в 19:04
Unknown: Большое спасибо за гирлянду!С наступающим новым годом!; 25 декабря 2015 г. в 01:10
Unknown: Огромное спасибо за ваш труд. Работа просто прелесть . Взяла себе с удовольствием.; 15 ноября 2016 г. в 01:25
Светлана: Дай Вам Бог здоровья и счастья! Просто и красиво.; 12 декабря 2016 г. в 17:16
Євгенія: Спасибо огромное); 5 января 2017 г. в 21:16