Как украсить свой сайт - блог к новогодним праздникам
С наступающими праздниками всех вас дорогие друзья. Итак, на носу Новый Год, Рождество Христово и другие замечательные зимние праздники. Пора украшать и приводить в порядок все свои имения.)В сегодняшней статье я покажу, как украсить свой сайт (блог):
- Красивой, фоновой, новогодней картинкой,
- Хихикающим Дедом Морозом,
- Гирляндой с анимацией
- Простой картинкой png.
Чтобы посмотреть, как оно выглядит далеко идти не придется, сею картинку я разместил в начале этой публикации. Если вам понравилось, тогда давайте перейдем к ее установке.
В панели управления нужно перейти в раздел Шаблон - Изменить HTML ищем код ]]></b:skin> и перед ним устанавливаем следующий код:
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggZJFq3m1BLNS7h2hP3o2j5gtcHB2xCZlIwcBKdGVIWxSoSkZq5zhqPHyRvQ-CNYOZOwASItDGFWrBqymJr39o2UFwIcgw0KWqcZRA63oAKJ2iUhnUREc7LXriqeLU5FJj2kRRwe5d_MA/s1600/Fon-2016-2-01-1+%25281%252921.jpg)
no-repeat top fixed;
}
Если полотно вашего сайта (блога) имеет ширину не более 1100px тогда все нормально можете сохранять шаблон. Но если полотно намного больше, в таком случае картинка будет прятаться за ним. В любом случае сохраняйте шаблон и проверяйте результат. Если картинка все же прячется добавьте к основному коду следующее значение:
background-size: 100%;
В итоге наш код должен выглядеть следующим образом:
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggZJFq3m1BLNS7h2hP3o2j5gtcHB2xCZlIwcBKdGVIWxSoSkZq5zhqPHyRvQ-CNYOZOwASItDGFWrBqymJr39o2UFwIcgw0KWqcZRA63oAKJ2iUhnUREc7LXriqeLU5FJj2kRRwe5d_MA/s1600/Fon-2016-2-01-1+%25281%252921.jpg)
no-repeat top fixed ;
background-size: 100%;
}
Теперь сохраните шаблон и посмотрите где находиться картинка на сей раз. Если она слишком далеко от полотна вместо 100% напишите 80 или 90%, в общем подбирайте процент пока картинка не сядет в нужном месте.
Если вы хотите другую картинку, тогда в коде, вместо моей ссылки поставьте ссылку своей картинки. Можно загрузить нужную картинку в сообщение блога, перейти на вкладку HTML там скопировать ссылку изображения и поставить ее в код.
CSS анимация Дед Мороз - Санта Клаус
Для установки скачайте файл с кодами. CSS код добавьте в редактор стилей своего сайта, HTML код установите в том месте, должен отображаться Санта. Название Merry Christmas можете сменить на свое в HTML.
Если после установки ваш Санта получился без глаз и бороды тогда добавьте следующий CSS;
.beard:before {
content: " ";
width: 80px;
height: 80px;
background: #f8e7dc;
border-radius: 50%;
position: absolute;
bottom: 15px;
}
.beard:after {
content: " ";
width: 80px;
height: 80px;
background: #f8e7dc;
border-radius: 50%;
position: absolute;
bottom: 15px;
}
.eyes:before {
content: " ";
position: absolute;
width: 15px;
height: 9px;
top: 0;
border: 5px solid #a8744f;
border-width: 0;
border-top-width: 5px;
border-radius: 50%;
}
.eyes:after {
content: " ";
position: absolute;
width: 15px;
height: 9px;
top: 0;
border: 5px solid #a8744f;
border-width: 0;
border-top-width: 5px;
border-radius: 50%;
}
.body:before {
content: " ";
width: 7px;
height: 7px;
background: #f7be10;
border-radius: 50%;
position: absolute;
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0px -18px 0px #f7be10, 0px 18px 0px #f7be10;
}
Переходим к просмотру видео:
Украсить сайт с помощью картинки PNG
Еще одни простой способ украсить сайт к новогодним и рождественским праздникам с помощью картинки в формате PNG, которую вы можете разместить например в боковой панели сайта. Для этого используйте код:
<img class="irc_mi" src="https://lh6.googleusercontent.com/proxy/cMrNpdkBnGP7T96z9MhYfIww1FUus2YlBJ-gEX7tNtbX38tJDakfObCtiCaPfPtB6ztNBMZC265UviDjQX8R4YLrdLA6w9C1wGckPOSOyfJ7ud6OuD39SR3-YVf5lJf2z3mToLCmmjA=s0-d.png" width="570" height="304" style="" alt="Картинки по запросу happy new year png">
Большое количество праздничных картинок вы сможете найти в Гугл. Для этого пропишите в поиске запрос "Новогодние картинки png" и перейдите в раздел Картинки. Скопируйте ссылку на понравившеюся картинку и вставьте ее в HTML код вместо ссылки выделенной красным цветом. Важно!!! Ссылка картинки обязательно должна заканчиваться тремя буквами: png, jpg в этом случае нам не подходит.
Так же можете подправить ширину и высоту картинки в параметрах width и height.
Гирлянда с елью и анимированными игрушками
Для тех, кто все таки хочет, чтобы сайт выглядел на праздники куда лучше, есть вариант со скриптом "ель и анимированные игрушки". Демо виджета.
Для установки используйте следующие HTML кода:
1. Javascript - Добавьте перед закрывающим тегом </body>
<script>
//<![CDATA[
jQuery(function () {
var d = function () {};
jQuery(document).delegate(".b-ball_bounce", "mouseenter", function () {
b(this);
m(this)
}).delegate(".b-ball_bounce .b-ball__right", "mouseenter", function (i) {
i.stopPropagation();
b(this);
m(this)
});
function f() {
var i = "https://red-star.pro/demo/33/js/ny-2016.swf";
i = i + "?nc=" + (new Date().getTime());
swfobject.embedSWF(i, "z-audio__player", "1", "1", "9.0.0", null, {}, {
allowScriptAccess: "always",
hasPriority: "true"
})
}
function h(i) {
return document[i]
}
window.flashInited = function () {
d = function (j) {
try {
h("z-audio__player").playSound(j)
} catch (i) {}
}
};
if (window.swfobject) {
window.setTimeout(function () {
jQuery("body").append('<div class="g-invisible"><div id="z-audio__player"></div></div>');
f()
}, 100)
}
var l = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "\\"];
var k = ["z", "x", "c", "v", "b", "n", "m", ",", ".", "/"];
var g = 36;
var a = {};
for (var e = 0, c = l.length; e < c; e++) {
a[l[e].charCodeAt(0)] = e
}
for (var e = 0, c = k.length; e < c; e++) {
a[k[e].charCodeAt(0)] = e
}
jQuery(document).keypress(function (j) {
var i = jQuery(j.target);
if (!i.is("input") && j.which in a) {
d(a[j.which])
}
});
function b(n) {
if (n.className.indexOf("b-ball__right") > -1) {
n = n.parentNode
}
var i = /b-ball_n(\d+)/.exec(n.className);
var j = /b-head-decor__inner_n(\d+)/.exec(n.parentNode.className);
if (i && j) {
i = parseInt(i[1], 10) - 1;
j = parseInt(j[1], 10) - 1;
d((i + j * 9) % g)
}
}
function m(j) {
var i = jQuery(j);
if (j.className.indexOf(" bounce") > -1) {
return
}
i.addClass("bounce");
function n() {
i.removeClass("bounce").addClass("bounce1");
function o() {
i.removeClass("bounce1").addClass("bounce2");
function p() {
i.removeClass("bounce2").addClass("bounce3");
function q() {
i.removeClass("bounce3")
}
setTimeout(q, 300)
}
setTimeout(p, 300)
}
setTimeout(o, 300)
}
setTimeout(n, 300)
}
});
//]]> </script>
2. HTML - так же установите перед закрывающим тегом </body>
<div class="b-page_newyear">
<div class="b-page__content">
<i class="b-head-decor">
<i class="b-head-decor__inner b-head-decor__inner_n1">
<div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
</i>
<i class="b-head-decor__inner b-head-decor__inner_n2">
<div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
</i>
<i class="b-head-decor__inner b-head-decor__inner_n3">
<div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
</i>
<i class="b-head-decor__inner b-head-decor__inner_n4">
<div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
</i>
<i class="b-head-decor__inner b-head-decor__inner_n5">
<div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
</i>
<i class="b-head-decor__inner b-head-decor__inner_n6">
<div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
</i>
<i class="b-head-decor__inner b-head-decor__inner_n7">
<div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
</i>
</i>
</div>
</div>
3. CSS - как добавлять смотрим видео на примере Blogger и WordPress
<style>
.b-head-decor{display:none}
.b-page_newyear .b-head-decor{
position:absolute;
z-index: 9999; /*fix by Ð&#144;Ð&#189;Ð&#189;Ð&#176;*/
top:0;
left:0;
display:block;
height:115px;
width:100%;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFEGFiCcIQ_PuCNGS1dXch6BHn_kN3CFVX5Cb_oA38_Ty7J1p-dl9BDNEyRSRsTdFBA5aE8VB_XiQX1YpksBBz4TFcVgthuRzDqKOeHRsFe2aWVnOML_thXb5ww678n-YWM_1h6TT0Y1c/s1600/el.png) repeat-x 0 0
}
.b-page_newyear .b-head-decor__inner{position:absolute;top:0;left:0;height:115px;display:block;width:373px}
.b-page_newyear .b-head-decor::before{content:&#39;&#39;;display:block;position:absolute;top:-115px;left:0;z-index:3;height:115px;display:block;width:100%;box-shadow:0 15px 30px rgba(0,0,0,0.75)}
.b-page_newyear .b-head-decor__inner_n2{left:373px}
.b-page_newyear .b-head-decor__inner_n3{left:746px}
.b-page_newyear .b-head-decor__inner_n4{left:1119px}
.b-page_newyear .b-head-decor__inner_n5{left:1492px}
.b-page_newyear .b-head-decor__inner_n6{left:1865px}
.b-page_newyear .b-head-decor__inner_n7{left:2238px}
.b-ball{position:absolute}
.b-ball_n1{top:0;left:3px;width:59px;height:83px}
.b-ball_n2{top:-19px;left:51px;width:55px;height:70px}
.b-ball_n3{top:9px;left:88px;width:49px;height:67px}
.b-ball_n4{top:0;left:133px;width:57px;height:102px}
.b-ball_n5{top:0;left:166px;width:49px;height:57px}
.b-ball_n6{top:6px;left:200px;width:54px;height:70px}
.b-ball_n7{top:0;left:240px;width:56px;height:67px}
.b-ball_n8{top:0;left:283px;width:54px;height:53px}
.b-ball_n9{top:10px;left:321px;width:49px;height:66px}
.b-ball_n1 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTmUsW6BfmmUax85jtZmcT9qXcisfiT1SjFvjGa0PGPC4O_IIlbKfZbO1DbqeyNyA1nabWKWRQf7BzkrAUj42zSUpZZkbnme7cP9eQ1LXBz5nRve6DpG8Kp56GES-fJyMXi7nbMj44Df8/s1600/b-ball_n1.png) no-repeat}
.b-ball_n2 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZctwijwH3KhK2M6VuTFHU3byRtWBp0O2P7zTM68723Mz0x1m8j26Wwx6KaznDIUQivTZKQiDlvcs4aGTlIma_Iha3OOtmkBRYMiyVKNPqxzG7N8Wf2fnbhnuC_rhUdCvtZ1TwywvgIsQ/s1600/b-ball_n2.png) no-repeat}
.b-ball_n3 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWUmrMLbg5omUbl80qA6_umLVXrO8eNYu_pJWwNscuNqNEBqkaGOIRBTgtPsxW7Z87PKkY4fFtt7RxM4oSwKPRQp5nw3tsOV8CC3zX7oChvx68urcgOyWgTjHYYKRWI8ToWTNKtJFhqik/s1600/b-ball_n3.png) no-repeat}
.b-ball_n4 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8mMbj7JhyphenhyphenkL1feG-2puimJK9sdvxR4LynTZlJPwcRSb7ypcJrgsexPI_VjG5HMyGxhwEqmnUz-oQlwQaMLdP57SGipEV-InUKWufl_uEmFdcjFs5dywjiB36OQ8eJmJMNbcVswMbhgg/s1600/b-ball_n4.png) no-repeat}
.b-ball_n5 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHc7XSBWaNyyXxVhzE28JcD5VXENCkReokMFeh5npoMglyuF3ORTlgc9tjFNeoCiK_XxFm7FBu7TrA0vcVpistbrMnHSKaxxBdFWR9e8XnNC2R2j6e6hIu_b8UwW7-8UUYuVuoqHAoHl8/s1600/b-ball_n5.png) no-repeat}
.b-ball_n6 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJGQ3HfBP28PUgffttDNRDp4r0BUuHpDGWEAv1P3-EKHypjvgYeGJeuGAsHhbt82fVUtHlwRDbVH0nh2msjwVoTcRNnRNAzHa2oxoWvAGXh69E6UIkqAd1IffiF3xUbdWpZW33ke0hPE/s1600/b-ball_n6.png) no-repeat}
.b-ball_n7 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWDGD0YuCE2hRzEGEOh7UNuhH2wDSyeXh8PCRtdTFmDAnzqvPCpqJJ9Qx-Wxd1KpaD5ftgxksmcEvlelvkAtMkyM2mRjNVEXaVCnzwIdNnCIdWAtdj7vXtZ5anTQ-d9s-qkLbZA1Ncw6g/s1600/b-ball_n7.png) no-repeat}
.b-ball_n8 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGJfib66X4QE4FhyphenhyphenV-vRLjO11uwBC6ZOalP6yevtHK9LLjYSc7sckq3KAfLfuN7TZpx6ckbwTNkcqEW31mL4913wdDR7_zzduL_k-oEbLbmeTzup4efD7tElgiafQ-SfgDhGR0v_6qps8/s1600/b-ball_n8.png) no-repeat}
.b-ball_n9 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaGbtUHCIEU74M_rmgGnmNMtAY25CBsThRVK6eLgIqa2Ovzi9oUiNyr0nuY5g8wB2_T05ucSvfpSTRQ9sem70MLAsKXZy5vjlxyVAD9CPKGi21kIUUi6c6QEBTmoHhc0uVgumCnXl1V2o/s1600/b-ball_n9.png) no-repeat}
.b-ball_i1 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3g5J0IDjTqVvXWttDIjGS43Sd_U-N-KpnDgPJ82wkHyjTkLnazvh4hcO0mL5N2Jl2pzzfvjtO7JMhJgzeEt6Sr2hioPoh25mn3FioIhW5lk0WujlC4ahjokTfwxqynH_Y44kFR3NwQBQ/s1600/b-ball_i1.png) no-repeat}
.b-ball_i2 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKhweAbCc26LKGha8v-8TrUm6FHfzxzrrlMNmEZeFFR_Z7os27m_QOboeTQyQaHU8WK-ElP3jkUCaxCCCiaJHNlTSMjZSE2_JsK7G1V6C1TXfoYl8fNFzdxrpZoZCvFwf7fSPBj9lndtU/s1600/b-ball_i2.png) no-repeat}
.b-ball_i3 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8llaQNRJnybvScBd2YXQVpD4aJIKgATOx5kZKbBNL4W5EpQea_pGjS40TYeTfuULSZWWyzFW_o1Zg6B_xXdMkgA_mgTrlIyNKc4wUw3J4fZS7KR-LxhV0gMrglmPncliy3Y4lQ50OwhM/s1600/b-ball_i3.png) no-repeat}
.b-ball_i4 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUAXKdmnAWGpyYlNAfQlqzjCdgKGW_HwTSmePiGL9m1rSdVhTJXFmecTKofCwZn83_SXd-gEvhMxCUMB8yQCA7CgxrCnG61IeekoEwoeUem3FYQC8fL6fmGptq51pYMrwqvRzx7iAFqWo/s1600/b-ball_i4.png) no-repeat}
.b-ball_i5 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWezVc1l6qzD3QEnKXsrg06Q07QXQwlwZ5PESoVKDlryAcyV7u09hs2y60wEZBJkXYDXHIJOrSMgXzopnLma1OwDy1Z0JsP2Jz8J7qyR7n2H-OVzKfs2qLSU-RS0qbiVblmAowGOx2yE0/s1600/b-ball_i5.png) no-repeat}
.b-ball_i6 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYNttWUHBiyaYn2D25mAOsUZtEDXgd81epQmQn8Xt-xDw39fkAouGdmJ20LFlAcbusqgsPN4lX2VcDJkxNLlAZWx5q4zxStE5Jebx3KdhLAkAJu1Ozfm0whAN1w25OPSyeCPT26tHR178/s1600/b-ball_i6.png) no-repeat}
.b-ball_i1{top:0;left:0;width:25px;height:71px}
.b-ball_i2{top:0;left:25px;width:61px;height:27px}
.b-ball_i3{top:0;left:176px;width:29px;height:31px}
.b-ball_i4{top:0;left:205px;width:50px;height:51px}
.b-ball_i5{top:0;left:289px;width:78px;height:28px}
.b-ball_i6{top:0;left:367px;width:6px;height:69px}
.b-ball__i{
position:absolute;
width:100%;
height:100%;
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
-o-transform-origin:50% 0;
transform-origin:50% 0;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
pointer-events:none
}
.b-ball_bounce .b-ball__right{position:absolute;top:0;right:0;left:50%;bottom:0;z-index:9}
.b-ball_bounce:hover .b-ball__right{display:none}
.b-ball_bounce .b-ball__right:hover{left:0;display:block!important}
.b-ball_bounce.bounce&gt;.b-ball__i{-webkit-transform:rotate(-9deg);-moz-transform:rotate(-9deg);-o-transform:rotate(-9deg);transform:rotate(-9deg)}
.b-ball_bounce .b-ball__right.bounce+.b-ball__i{-webkit-transform:rotate(9deg);-moz-transform:rotate(9deg);-o-transform:rotate(9deg);transform:rotate(9deg)}
.b-ball_bounce.bounce1&gt;.b-ball__i{-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg);transform:rotate(6deg)}
.b-ball_bounce .b-ball__right.bounce1+.b-ball__i{-webkit-transform:rotate(-6deg);-moz-transform:rotate(-6deg);-o-transform:rotate(-6deg);transform:rotate(-6deg)}
.b-ball_bounce.bounce2&gt;.b-ball__i{-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg)}
.b-ball_bounce .b-ball__right.bounce2+.b-ball__i{-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}
.b-ball_bounce.bounce3&gt;.b-ball__i{-webkit-transform:rotate(1.5deg);-moz-transform:rotate(1.5deg);-o-transform:rotate(1.5deg);transform:rotate(1.5deg)}
.b-ball_bounce .b-ball__right.bounce3+.b-ball__i{-webkit-transform:rotate(-1.5deg);-moz-transform:rotate(-1.5deg);-o-transform:rotate(-1.5deg);transform:rotate(-1.5deg)}
</style>
4. Jquery - Если анимация не срабатывает добавьте jquery перед закрывающим тегом </head>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'></script>
Надеюсь сегодняшняя статья помогла вам украсить сайт (блог) к новогодним праздникам.