树叶飘落

html

    <!-- 树叶飘落动画效果 -->
            <div class="leafbox">
                <div class="leafimg1">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf1.png">
                </div>
                <div class="leafimg2">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf2.png">
                </div>
                <div class="leafimg3">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf3.png">
                </div>
                <div class="leafimg4">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf4.png">
                </div>
                <div class="leafimg5">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf5.png">
                </div>
            </div>
        </div>
    </div>

 

css

.leafbox{position:absolute;top:0;left:-460px;width:1920px;z-index:1;height:890px;}
.leafbox > div{position:absolute;opacity:0;filter:alpha(opacity=0);-webkit-animation-iteration-count: infinite, infinite;-webkit-animation-direction: normal, normal;-webkit-animation-timing-function: linear, ease-in;-moz-animation-iteration-count: infinite, infinite;-moz-animation-direction: normal, normal;-moz-animation-timing-function: linear, ease-in;}
.leafbox > div > img {position: absolute;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-timing-function: ease-in-out;
    -webkit-transform-origin: 50% -100%;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-timing-function: ease-in-out;-moz-transform-origin: 50% -100%;}
.show .leafimg1{top: -140px;left: 428px;-webkit-animation-name: dropAnim ;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.5s;animation-duration: 5.5s;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
.show .leafimg1 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 6.3s;animation-duration: 6.3s;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
.show .leafimg2{top: -140px;left: 288px;-webkit-animation-name: dropAnim;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.8s;animation-duration: 5.8s;-webkit-animation-delay: 8s;animation-delay: 8s;}
.show .leafimg2 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 6.5s;animation-duration: 6.5s;-webkit-animation-delay: 8s;animation-delay: 8s;}
.show .leafimg3{top: -140px;left: 1328px;-webkit-animation-name: dropAnim;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.7s;animation-duration: 5.7s;-webkit-animation-delay: 4s;animation-delay: 4s;}
.show .leafimg3 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 6s;animation-duration: 6s;-webkit-animation-delay: 4s;animation-delay: 4s;}
.show .leafimg4{top: -140px;left: 1730px;-webkit-animation-name: dropAnim;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.2s;animation-duration: 5.2s;-webkit-animation-delay: 10s;animation-delay: 10s;}
.show .leafimg4 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 5.8s;animation-duration: 5.8s;-webkit-animation-delay: 10s;animation-delay: 10s;}
.show .leafimg5{top: -140px;left: 1150px;-webkit-animation-name: dropAnim;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.3s;animation-duration: 5.3s;-webkit-animation-delay: 14s;animation-delay: 14s;}
.show .leafimg5 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 6.6s;animation-duration: 6.6s;-webkit-animation-delay: 14s;animation-delay: 14s;}
@-webkit-keyframes dropAnim
{
    0%   {-webkit-transform: translate(0px, -50px);opacity: 0;}
    5%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {-webkit-transform: translate(0px, 690px);opacity: 0;}
}
@-webkit-keyframes flipAnim 
{
    0%   { -webkit-transform: scale(-1, 1) rotate(65deg); }
    100% { -webkit-transform: scale(-1, 1) rotate(-65deg); }
}
@-moz-keyframes dropAnim
{
    0%   {-moz-transform: translate(0px, -50px);opacity: 0;}
    5%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {-moz-transform: translate(0px, 690px);opacity: 0;}
}
@-moz-keyframes flipAnim 
{
    0%   { -moz-transform: scale(-1, 1) rotate(65deg); }
    100% { -moz-transform: scale(-1, 1) rotate(-65deg); }
}
@keyframes dropAnim
{
    0%   {transform: translate(0px, -50px);opacity: 0;}
    5%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {transform: translate(0px, 690px);opacity: 0;}
}
@keyframes flipAnim 
{
    0%   { transform: scale(-1, 1) rotate(65deg); }
    100% { transform: scale(-1, 1) rotate(-65deg); }
}

js

     //树叶动画效果
        $(".leafbox").addClass("show");

        if ($(window).scrollTop() >= 600) {
            if (!$('#cnblogs').html()) {
                $('.sidebar').show();
            }else{
                $('.sidebar').hide();
            }        
        } else {
            $('.sidebar').hide();
        }