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(); }
时间: 2024-10-28 06:51:58