Новогодние украшения для сайта, CSS анимация

красивая новодняя картинка для сайта - блога

Как украсить свой сайт - блог к новогодним праздникам

С наступающими праздниками всех вас дорогие друзья. Итак, на носу Новый Год, Рождество Христово и другие замечательные зимние праздники. Пора украшать и приводить в порядок все свои имения.)

В сегодняшней статье я покажу, как украсить свой сайт (блог):

  1. Красивой, фоновой, новогодней картинкой, 
  2. Хихикающим Дедом Морозом, 
  3. Гирляндой с анимацией 
  4. Простой картинкой 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 анимация Дед Мороз - Санта Клаус


Merry Christmas!



Для установки скачайте файл с кодами. 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
&lt;style&gt;
.b-head-decor{display:none}
.b-page_newyear .b-head-decor{
   position:absolute;
   z-index: 9999; /*fix by Ð&amp;#144;Ð&amp;#189;Ð&amp;#189;Ð&amp;#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:&amp;#39;&amp;#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&amp;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&amp;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&amp;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&amp;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)}
&lt;/style&gt;

4. Jquery - Если анимация не срабатывает добавьте jquery перед закрывающим тегом </head>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'></script>

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


Поделиться в социальных сетях:
Facebook X Vkontakte

Рекомендуем