The leaves are falling

Html

    <!--Leaf falling animation effect -            <Divclass= "Leafbox">                <Divclass= "LEAFIMG1">                    <imgsrc= "Http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf1.png">                </Div>                <Divclass= "Leafimg2">                    <imgsrc= "Http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf2.png">                </Div>                <Divclass= "LEAFIMG3">                    <imgsrc= "Http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf3.png">                </Div>                <Divclass= "Leafimg4">                    <imgsrc= "Http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf4.png">                </Div>                <Divclass= "Leafimg5">                    <imgsrc= "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

     // leaf animation effect        $ (". Leafbox"). AddClass ("show");         if ($ (window). scrolltop () >= (){            if (!$ (' #cnblogs '). HTML ()) {                $ ('. Sidebar ') ). Show ();            } Else {                $ ('. Sidebar '). Hide ();            }                 Else {            $ ('. Sidebar '). Hide ();        }

The leaves are falling