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

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

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

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

Красивой, фоновой, новогодней картинкой,
Хихикающим Дедом Морозом,
Гирляндой с анимацией
Простой картинкой png.

Чтобы посмотреть, как оно выглядит далеко идти не придется, сею картинку я разместил в начале этой публикации. Если вам понравилось, тогда давайте перейдем к ее установке.

В панели управления нужно перейти в раздел Шаблон - Изменить HTML ищем код ]]></b:skin> и перед ним устанавливаем следующий код:

CSSbody {
background: url(https://1.bp.blogspot.com/-kiIJhQIJjFI/XeoO6yO4dcI/AAAAAAAAnHs/u4LSU4Q29isBRkEE6nrOeoRCzZJ53LSbgCLcBGAsYHQ/s1600/Fon-2016-2-01-1%2B%25281%252921.jpg)
no-repeat top fixed;
}

Если полотно вашего сайта (блога) имеет ширину не более 1100px тогда все нормально можете сохранять шаблон. Но если полотно намного больше, в таком случае картинка будет прятаться за ним. В любом случае сохраняйте шаблон и проверяйте результат. Если картинка все же прячется добавьте к основному коду следующее значение:

CSSbackground-size: 100%;

В итоге наш код должен выглядеть следующим образом:

CSSbody {
background: url(https://1.bp.blogspot.com/-kiIJhQIJjFI/XeoO6yO4dcI/AAAAAAAAnHs/u4LSU4Q29isBRkEE6nrOeoRCzZJ53LSbgCLcBGAsYHQ/s1600/Fon-2016-2-01-1%2B%25281%252921.jpg)
no-repeat top fixed ;
background-size: 100%;
}

Теперь сохраните шаблон и посмотрите где находиться картинка на сей раз. Если она слишком далеко от полотна вместо 100% напишите 80 или 90%, в общем подбирайте процент пока картинка не сядет в нужном месте.

Если вы хотите другую картинку, тогда в коде, вместо моей ссылки поставьте ссылку своей картинки. Можно загрузить нужную картинку в сообщение блога, перейти на вкладку HTML там скопировать ссылку изображения и поставить ее в код.

CSS анимация Дед Мороз - Санта Клаус

Merry Christmas!

Для установки скачайте файл с кодами. CSS код добавьте в редактор стилей своего сайта, HTML код установите в том месте, должен отображаться Санта. Название Merry Christmas можете сменить на свое в HTML.

Если после установки ваш Санта получился без глаз и бороды тогда добавьте следующий CSS;

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, которую вы можете разместить например в боковой панели сайта. Для этого используйте код:

HTML<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>

JS<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>

HTML<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

CSS&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://1.bp.blogspot.com/-sre0x5g4aA0/XfntNw3JROI/AAAAAAAAnJ8/RKZrCFqMPWM3QTauRaZ-ZBtC7Z_CEszJQCLcBGAsYHQ/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://1.bp.blogspot.com/-94eEW5HnFuE/XfntLMz7eLI/AAAAAAAAnJY/mBKa8SZOIhkywqjAVrb15m_BApWTK2cSwCLcBGAsYHQ/s1600/b-ball_n1.png) no-repeat}
.b-ball_n2 .b-ball__i{background:url(https://1.bp.blogspot.com/-iI9hlGmGyPI/XfntLuwuFWI/AAAAAAAAnJc/ygUE_5En1AQfw7iffZqW1jNfkINK1ygdQCLcBGAsYHQ/s1600/b-ball_n2.png) no-repeat}
.b-ball_n3 .b-ball__i{background:url(https://1.bp.blogspot.com/-pwBd7m6hdpI/XfntLiJQWXI/AAAAAAAAnJg/w7Rz4jQE0qIPv3kgzLPFhg1LpWsjgSklwCLcBGAsYHQ/s1600/b-ball_n3.png) no-repeat}
.b-ball_n4 .b-ball__i{background:url(https://1.bp.blogspot.com/-jzuCb9v1Qyg/XfntMIzgD5I/AAAAAAAAnJk/WMwhNg8ex40yN9gy4ID9ZlTDneaXult7ACLcBGAsYHQ/s1600/b-ball_n4.png) no-repeat}
.b-ball_n5 .b-ball__i{background:url(https://1.bp.blogspot.com/-eJrR47t3vIc/XfntMSGeomI/AAAAAAAAnJo/gr1tPWEBsBQEISozHScqB6CZTrGQqR0IACLcBGAsYHQ/s1600/b-ball_n5.png) no-repeat}
.b-ball_n6 .b-ball__i{background:url(https://1.bp.blogspot.com/-0THmNkttaj4/XfntMt02kaI/AAAAAAAAnJs/reWhseIKMBEMCsEB-7yWNkPNxZxIQFLWQCLcBGAsYHQ/s1600/b-ball_n6.png) no-repeat}
.b-ball_n7 .b-ball__i{background:url(https://1.bp.blogspot.com/-XbBBJ-S6hVY/XfntMyzSwoI/AAAAAAAAnJw/i3NfzRrJXdUBGbQWCLkx_kY1JrroLc7GACLcBGAsYHQ/s1600/b-ball_n7.png) no-repeat}
.b-ball_n8 .b-ball__i{background:url(https://1.bp.blogspot.com/-JLLjGlxdGNI/XfntNPxCTrI/AAAAAAAAnJ0/uwIBiyN2J704mxK9DZoXIsOI3OOOjjdtQCLcBGAsYHQ/s1600/b-ball_n8.png) no-repeat}
.b-ball_n9 .b-ball__i{background:url(https://1.bp.blogspot.com/-8IC6PQbk2PA/XfntNfdZ04I/AAAAAAAAnJ4/dDtrvsSjams2ZpCME4TTZvACc-mTKx2dQCLcBGAsYHQ/s1600/b-ball_n9.png) no-repeat}
.b-ball_i1 .b-ball__i{background:url(https://1.bp.blogspot.com/-vGWZh_lLQgA/XfntJowBRYI/AAAAAAAAnJI/1Jx4BJ9NLhU8hZzDXhpEd5NIDjViSHNBACLcBGAsYHQ/s1600/b-ball_i1.png) no-repeat}
.b-ball_i2 .b-ball__i{background:url(https://1.bp.blogspot.com/-DG-ECQWRRak/XfntJU2BUMI/AAAAAAAAnJA/uoLNLBvDnIQuLVx3jO79eEq-eniyFL23gCLcBGAsYHQ/s1600/b-ball_i2.png) no-repeat}
.b-ball_i3 .b-ball__i{background:url(https://1.bp.blogspot.com/-kdJYeLqKjC0/XfntJgKWTSI/AAAAAAAAnJE/KGL-2HR5kQUMlk_iLGR0G5EhyEhRLO9YQCLcBGAsYHQ/s1600/b-ball_i3.png) no-repeat}
.b-ball_i4 .b-ball__i{background:url(https://1.bp.blogspot.com/-xCn-1I6JhcI/XfntKfqdyII/AAAAAAAAnJM/e-gU6At6MTcNJUDAIxsTijTip1n-8tc1gCLcBGAsYHQ/s1600/b-ball_i4.png) no-repeat}
.b-ball_i5 .b-ball__i{background:url(https://1.bp.blogspot.com/-feEASV-fmOI/XfntKvTcF0I/AAAAAAAAnJQ/Hm6wmxvh9iwBCbKc8FQSuwGcSG53tuR1QCLcBGAsYHQ/s1600/b-ball_i5.png) no-repeat}
.b-ball_i6 .b-ball__i{background:url(https://1.bp.blogspot.com/-P5duOXL3vng/XfntKpobJVI/AAAAAAAAnJU/bXgV4MS20PQfwnbefuNqiPrJoKkjNANeACLcBGAsYHQ/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>:

Jquery<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'></script>

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

Mark Korvin 12/28/2018 Коммент.

Mark Korvin

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

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

CSS анимация Дед Мороз - Санта Клаус

Merry Christmas!

Переходим к просмотру видео:

Украсить сайт с помощью картинки PNG

Гирлянда с елью и анимированными игрушками

Рекомендуемые публикации

Видео

Последние публикации

Вопросы, Ответы, Отзывы

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

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

CSS анимация Дед Мороз - Санта Клаус

Merry Christmas!

Переходим к просмотру видео:

Украсить сайт с помощью картинки PNG

Гирлянда с елью и анимированными игрушками

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

Рекомендуем

Рекомендуемые публикации

Видео

Последние публикации

Вопросы, Ответы, Отзывы