Home x Blogger widgets
New Year decorations for website, CSS animation

New Year decorations for website, CSS animation

November 29, 2023
New Year decorations for website

How to decorate your website - blog for the New Year holidays

Happy upcoming holidays to all of you dear friends. So, the New Year, Christmas and other wonderful winter holidays are upon us. It's time to decorate and put all your estates in order).

In today's article I will show you how to decorate your website (blog):
  1. A beautiful background, New Year's picture, 
  2. Giggling Santa Claus, 
  3. Garland with animation 

1. A beautiful background, New Year's picture

New Year decorations for website, CSS animation
In the control panel you need to go to the section Theme - Edit HTML and look for the code ]]></b:skin> and before it set the following code:
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-5IxBDQ1yKJ0_A4-eQeL-ZV1wYE4dfbk5R36B3_Ts_2BPGlajDH1TVUf31yyKKe4ofkjbychVFVFCTlYwgCIaqDK1utz9VTDIPjSVAomVOwlEF2UjyGhyphenhyphenoel0497yF6CVaX1PwZxqhE/s1600/Fon-2016-2-01-1+%25281%252921.jpg)
no-repeat top fixed;
}

If the canvas of your site (blog) has a width of no more than 1100px then everything is fine you can save the template. But if the canvas is much larger, in this case the picture will hide behind it. In any case, save the template and check the result. If the picture is still hiding add the following value to the main code: 
background-size: 100%;

As a result, our code should look like this: 
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-5IxBDQ1yKJ0_A4-eQeL-ZV1wYE4dfbk5R36B3_Ts_2BPGlajDH1TVUf31yyKKe4ofkjbychVFVFCTlYwgCIaqDK1utz9VTDIPjSVAomVOwlEF2UjyGhyphenhyphenoel0497yF6CVaX1PwZxqhE/s1600/Fon-2016-2-01-1+%25281%252921.jpg)
no-repeat top fixed ;
background-size: 100%;
}

Now save the template and see where the picture is this time. If it is too far from the canvas instead of 100% write 80 or 90%, in general select the percentage until the picture sits in the right place.

If you want a different image, then in the code, instead of my link, put the link of your image. You can upload the image you want in your blog post, go to the HTML tab, copy the image link and put it in the code.

2. CSS animation Santa Claus


Merry Christmas!



To install download the code file. Add the CSS code to your site's HTML editor, set the HTML code in the place where Santa should be displayed. You can change the name Merry Christmas to your own in the HTML. If after installation your Santa is without eyes and beard then add the following 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;
}

3. Garland with spruce tree and animated toys

Garland with spruce tree and animated toys
For those who still want the site to look much better for the holidays, there is an option with the “spruce and animated toys” script. Widget demo Use the following HTML codes to install it: 1. Add before the </body> Javascript: 
<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. Also set it before the closing tag </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. Add after ]]></b:skin> 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisiIECFImtvAtp4S6mj77OBR7haafC2YZHM6JMA6mbritJNXC0VvJe7AZPnTPv-YM2oOwqXssB-JeZSPq_DqRjOWfIozRq-QnTa3Y5AJ5TfHVWNF_MEx74M1iNmyd5PR4aIBBSb14s_vI/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/AVvXsEha4XRSkh5HyyECJPW0Sk5itXvxHm8FNm-GKAH6vOOMFcGPmgcz4L1kMOhznqGhzZaQNmVd2fFur9acYncswQrZFdijAHfPLmUQRQHsIS-YbEDhKtHUX_WbAzprpm6iZQ4GJvZ-vvvdPY4/s1600/b-ball_n1.png) no-repeat}
.b-ball_n2 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEznWTb0WgsgI2lt2ZlX9UyKP4bRThDZzr-IxY-ngJmltQD7cP99eakMSoHh8FtxFJkEEztSttGMmfBTJ4gkeYaIfqIreVE68T2EMZYpYBo6pEu7XpVzciibY5uOOlWr1FtLDbTTY09Y/s1600/b-ball_n2.png) no-repeat}
.b-ball_n3 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGfYVA_EEUQ8d2iNMDJ7lTBRqm6uI3G7Bp0Xz7XTkDCwQ57cM94HfLIdYvfv4YbLpit8sJHRof6wpb8gbggewdk6IMsqZ0RfMG5-jU9aMk0O0qUGapwFsN3TBi83qNhxfEho4MXMrLGkY/s1600/b-ball_n3.png) no-repeat}
.b-ball_n4 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmw7LiX13KXMSGC8qpp-vU7Pfg7DiCQvThNPJob-IuxUOYque-y04ldYEKb1h4-Olj1X6ZjdY64Yy9BaKy1FoZxXlHod-nVt16Yn4WcibsU-UCHTyqXQp2Uf0uQ0VpIsuQpIPp8eW84Iw/s1600/b-ball_n4.png) no-repeat}
.b-ball_n5 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6KaV0UKhGHePRPyHeDRNVL9EgPPXDDtq2RYJUoEKgbmOtqkELfG_aAMtBM98pH31hY3uBXw4Z1iZpbTY1_3NeKMkWZ3irIj7lI7SVLJWRbQOW7-AyJhODPkzhqAJldeMdFGWGufP49U/s1600/b-ball_n5.png) no-repeat}
.b-ball_n6 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-CR8vuU31RLVTRXf63KrS7pKmWRhhSXBKAwThOz8seJHYjPW89B0I3xZtAJNOgFK1Pf13d_NGwvyN1Dr-n1zauuAEDENWJqWqOitDfEOujvkpKBWn4U9G0gklF0_nxU8un-Pl1PT4ubw/s1600/b-ball_n6.png) no-repeat}
.b-ball_n7 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8n0zl2DcS_kPOVsnyxC9F7e0Mj38QrqOT4eNEu23K-coLTfPhsp9VurG8OfQfS7Xlt7JlDQRhcrQu3q6bld9ebEZ0mR5kQT33dYN9NgnK-o6nUMiHt9gvPRh3rO0QwvjVqIm54tLyeuU/s1600/b-ball_n7.png) no-repeat}
.b-ball_n8 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLFz-dPgO4wibS7ywaYyMWTewu99QRXue4x8h7VBBbWBOGTrGILK19Zquy_aeGi9uTjPvulCzD8jK9u5IyG-9TVdxaUXQcvIlzGGHVBZ7A7nc_OL14lJH54mEcAW3QDmpCSYklkTTfLE/s1600/b-ball_n8.png) no-repeat}
.b-ball_n9 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbwcYu9iVr4Q6ycf74LHPr9BE32wAh0z9sVocCcpWGxT-icz-a70-TAWN-tRkY63TiQJW4XF22Udm6H72Hdk_61rcvisedgn5h1p1TIGvKRxMhTMbm6sAIsMo8Fjo8YGYhhDrx6CJtgc/s1600/b-ball_n9.png) no-repeat}
.b-ball_i1 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFc9wiVIjcYnTtzqTz_NrpuRkVypZP2hkFwHZP8T_cDTSdcP2Rg4pEuXBAnzVTOg4tO76GJsteApNZPr-Aii2h0f6hLHZOMFCgcCECsj-N31Q9o9K4QEdqCrcujXfK0dLuI9sdv-OTVU/s1600/b-ball_i1.png) no-repeat}
.b-ball_i2 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRrZ7yRWgkBacEudXNjD7p_HyS4y2qgkgBju-7mqje4Q-0pON8_5s-Vf-VTafqshcVLCAZPqb-CRGUTd_gvven-QqPwWeb_hSy9ywZgkwyaQjht57LqWEsDRhQHx5ioM8lBkCXPLTDUA/s1600/b-ball_i2.png) no-repeat}
.b-ball_i3 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJZDF4rhxvuBbLKKV_Y9eKGcjRD_hyQqdLUsgRIiChk0AJ-alghnmIyhyphenhyphenI6rBUft42b2qlxaQp0Sj33YtoMd4HWV7B49LkOEUMFjtNM1ov_Q2tkb5vZ5r2h7KU4kSmZP6DLv5H4b12lQ/s1600/b-ball_i3.png) no-repeat}
.b-ball_i4 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqTT2jfKumhIJMe337n4vgOI1mYzoC6Au5EEEy-DdKIeYeTF-k1HZrZbG63WBJLrOjG_qwomBeb3hMJ894XiL-9tigqePl26zd-miRG8gR-3Hif4SQ8bQNLzquMzFBeYAPo7_Qiol4IY/s1600/b-ball_i4.png) no-repeat}
.b-ball_i5 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiDtEix4AC37XuWKX0jqdFeLH6SLQI1zNGsMGbaUeB2F1WLE2C3CqPjukeM5ojIvjV8K5t6govpaXR5YgY1NNkvHcnxv5uB0al_HoiCHDDt2_XBamfyaALSQp4FARgcMPv8pTsSgHXk6w/s1600/b-ball_i5.png) no-repeat}
.b-ball_i6 .b-ball__i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Z-zyDuOhhXpOrl0gAUo0nMm3Ta128JuZFaWpcfvGVjcjqCVzTzQ4pn2wdIq8D39RK5YXiKtRWsE6dhHaE7WuGQvw0KOCn7qjjFcZj0dW7WLzW6mDIsjzZ__LU-aUCKEFqRvOuRUtdSA/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. If the animation doesn't work add jquery before </head>: 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'></script>

I hope today's article helped you decorate your site (blog) for the New Year holidays.


Share by this in:

More Interesting Posts