这款HTML5树叶飘落动画是基于webkit内核的，也就是说要在webkit内核的浏览器上才能使用这款动画。
源码下载 演示地址
HTML代码
XML/HTML Code复制内容到剪贴板 <divid="container"> <> <> <divid="leafContainer"></div> <> <divid="message"> <em>这是基于webkit的落叶动画</em> </div> </div>
CSS代码
CSS Code复制内容到剪贴板 #container{ position:relative; height:700px; width:500px; margin:10pxauto; overflow:hidden; border:4pxsolid#5C090A; background:#4E4226url('images/backgroundLeaves.jpg')no-repeattopleft; } /*DefinesthepositionanddimensionsoftheleafContainerdiv*/ #leafContainer { position:absolute; width:100%; height:100%; } /*Definestheappearance,position,anddimensionsofthemessagediv*/ #message { position:absolute; top:160px; width:100%; height:300px; background:transparenturl('images/textBackground.png')repeat-xcenter; color:#5C090A; font-size:220%; font-family:'Georgia'; text-align:center; padding:20px10px; -webkit-box-sizing:border-box; -webkit-background-size:100%100%; z-index:1; } p{ margin:15px; } a { color:#5C090A; text-decoration:none; } /*Setsthecolorofthe"Dino'sGardeningService"message*/ em { font-weight:bold; font-style:normal; } .phone{ font-size:150%; vertical-align:middle; } /*ThisCSSruleisappliedtoalldivelementsintheleafContainerdiv. ItstylesandanimateseachleafDiv. */ #leafContainer>div { position:absolute; width:100px; height:100px; /*Weusethefollowingpropertiestoapplythefadeanddropanimationstoeachleaf. Eachofthesepropertiestakestwovalues.Thesevaluesrespectivelymatchasetting forfadeanddrop. */ -webkit-animation-iteration-count:infinite,infinite; -webkit-animation-direction:normal,normal; -webkit-animation-timing-function:linear,ease-in; } /*ThisCSSruleisappliedtoallimgelementsdirectlyinsidedivelementswhichare directlyinsidetheleafContainerdiv.Inotherwords,itmatchesthe'img'elements insidetheleafDivswhicharecreatedinthecreateALeaf()function. */ #leafContainer>div>img{ position:absolute; width:100px; height:100px; /*WeusethefollowingpropertiestoadjusttheclockwiseSpinorcounterclockwiseSpinAndFlip animationsoneachleaf. ThecreateALeaffunctionintheLeaves.jsfiledetermineswhetheraleafhasthe clockwiseSpinorcounterclockwiseSpinAndFlipanimation. */ -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-timing-function:ease-in-out; -webkit-transform-origin:50%-100%; } /*Hidesaleaftowardstheveryendoftheanimation*/ @-webkit-keyframesfade { /*Showaleafwhileintoorbelow95percentoftheanimationandhideit,otherwise*/ 0%{opacity:1;} 95%{opacity:1;} 100%{opacity:0;} } /*Makesaleaffallfrom-300to600pixelsinthey-axis*/ @-webkit-keyframesdrop { /*Movealeafto-300pixelsinthey-axisatthestartoftheanimation*/ 0%{-webkit-transform:translate(0px,-50px);} /*Movealeafto600pixelsinthey-axisattheendoftheanimation*/ 100%{-webkit-transform:translate(0px,650px);} } /*Rotatesaleaffrom-50to50degreesin2Dspace*/ @-webkit-keyframesclockwiseSpin { /*Rotatealeafby-50degreesin2Dspaceatthestartoftheanimation*/ 0%{-webkit-transform:rotate(-50deg);} /*Rotatealeafby50degreesin2Dspaceattheendoftheanimation*/ 100%{-webkit-transform:rotate(50deg);} } /*Flipsaleafandrotatesitfrom50to-50degreesin2Dspace*/ @-webkit-keyframescounterclockwiseSpinAndFlip { /*Flipaleafandrotateitby50degreesin2Dspaceatthestartoftheanimation*/ 0%{-webkit-transform:scale(-1,1)rotate(50deg);} /*Flipaleafandrotateitby-50degreesin2Dspaceattheendoftheanimation*/ 100%{-webkit-transform:scale(-1,1)rotate(-50deg);} }
JavaScript代码
JavaScript Code复制内容到剪贴板 /*Definethenumberofleavestobeusedintheanimation*/ constNUMBER_OF_LEAVES=30; /* Calledwhenthe"FallingLeaves"pageiscompletelyloaded. */ functioninit() { /*Getareferencetotheelementthatwillcontaintheleaves*/ varcontainer=document.getElementById('leafContainer'); /*Filltheemptycontainerwithnewleaves*/ for(vari=0;i<NUMBER_OF_LEAVES;i++) { container.appendChild(createALeaf()); } } /* Receivesthelowestandhighestvaluesofarangeand returnsarandomintegerthatfallswithinthatrange. */ functionrandomInteger(low,high) { returnlow+Math.floor(Math.random()*(high-low)); } /* Receivesthelowestandhighestvaluesofarangeand returnsarandomfloatthatfallswithinthatrange. */ functionrandomFloat(low,high) { returnlow+Math.random()*(high-low); } /* ReceivesanumberandreturnsitsCSSpixelvalue. */ functionpixelValue(value) { returnvalue+'px'; } /* Returnsadurationvalueforthefallinganimation. */ functiondurationValue(value) { returnvalue+'s'; } /* Usesanimgelementtocreateeachleaf."Leaves.css"implementstwospin animationsfortheleaves:clockwiseSpinandcounterclockwiseSpinAndFlip.This functiondetermineswhichofthesespinanimationsshouldbeappliedtoeachleaf. */ functioncreateALeaf() { /*Startbycreatingawrapperdiv,andanemptyimgelement*/ varleafDiv=document.createElement('div'); varimage=document.createElement('img'); /*Randomlychoosealeafimageandassignittothenewlycreatedelement*/ image.src='images/realLeaf'+randomInteger(1,5)+'.png'; leafDiv.style.top="-100px"; /*Positiontheleafatarandomlocationalongthescreen*/ leafDiv.style.left=pixelValue(randomInteger(0,500)); /*Randomlychooseaspinanimation*/ varspinAnimationName=(Math.random()<0.5)?'clockwiseSpin':'counterclockwiseSpinAndFlip'; /*Setthe-webkit-animation-namepropertywiththesevalues*/ leafDiv.style.webkitAnimationName='fade,drop'; image.style.webkitAnimationName=spinAnimationName; /*Figureoutarandomdurationforthefadeanddropanimations*/ varfadeAndDropDuration=durationValue(randomFloat(5,11)); /*Figureoutanotherrandomdurationforthespinanimation*/ varspinDuration=durationValue(randomFloat(4,8)); /*Setthe-webkit-animation-durationpropertywiththesevalues*/ leafDiv.style.webkitAnimationDuration=fadeAndDropDuration+','+fadeAndDropDuration; varleafDelay=durationValue(randomFloat(0,5)); leafDiv.style.webkitAnimationDelay=leafDelay+','+leafDelay; image.style.webkitAnimationDuration=spinDuration; //addthe<img>tothe<div> leafDiv.appendChild(image); /*Returnthisimgelementsoitcanbeaddedtothedocument*/ returnleafDiv; } /*Callstheinitfunctionwhenthe"FallingLeaves"pageisfullloaded*/ window.addEventListener('load',init,false);
以上就是本文的全部内容，希望对大家学习有所帮助。
【逼真的HTML5树叶飘落动画】相关文章：