逼真的HTML5树叶飘落动画

这款html5树叶飘落动画是基于webkit内核的，也就是说要在webkit内核的浏览器上才能使用这款动画。

html代码

xml/html code
复制内容到剪贴板

<divid=“container”> <!–thecontainerisdynamicallypopulatedusingtheinitfunctioninleaves.js–> <!–itsdimensionsandpositionaredefinedusingitsidlectorinleaves.css–> <divid=“leafcontainer”></div> <!–itsappearance,dimensions,andpositionaredefinedusingitsidlectorinleaves.css–> <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:tranthan什么意思sparenturl(‘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; } /*tsthecolorofthe“dino’sgardeningrvice”message*/ em { font-weight:bold; font-style:normal; } .phone{ font-size:150%; vertical-align:middle; } /*thiscssruleisappliedtoalldivelementsintheleafcontainerdiv. itstylesandanimateachleafdiv. */ #leafcontainer>div { position:absolute; width:100px; height:100px; /*weuthefollowingpropertiestoapplythefadeanddropanimationstoeachleaf. eachofthepropertiestakestwovalues.thevaluesrespectivelymatchatting forfadeanddrop. */ -webkit-animation-iteration-count:infinite,infinite; -webkit-animation-direction:normal,normal; -webkit-animation-timing-function:linear,ea-in; } /*thiscssruleisappliedtoallimgelementsdirectlyinsidedivelementswhichare directlyinsidetheleafcontainerdiv.inotherwords,itmatchesthe‘img’elements insidetheleafdivswhicharecreatedinthecreatealeaf()function. */ 平面的点法式方程#leafcontainer>div>img{ position:absolute至上励合棉花糖歌词; width:100px; height:100px; /*weuthefollowingpropertiestoadjusttheclockwispinorcounterclockwispinandflip animationsoneachleaf. thecreatealeaffunctionintheleaves.jsfiledetermineswhetheraleafhasthe clockwispinorcounterclockwispinandflipanimation. */ -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-timing-function:ea-in-out; -webkit-transform-origin:50%-100%; } /*hidesaleaftowardstheveryendoftheanimation*/ @-webkit-keyframesfade { /*showaleafwhileintoorbelow95percentoftheanimationandhideit,otherwi*/ 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-keyframesclockwispin { /*rotatealeafby-50degreesin2dspaceatthestartoftheanimation*/ 0%{-webkit-transform:rotate(-50deg);} /*rotatealeafby50degreesin2dspaceattheendoftheanimation*/ 100%{-webkit-transform:rotate(50deg);} } /*flipsaleafandrotatesitfrom50to-50degreesin2dspace*/ @-webkit-keyframescounterclockwispinandflip { /*flipaleafandrotateitby50degreesin2dspaceatthestartoftheanimation*/ 0%{-webkit-transform:scale(-1,1)rotate(50deg);} /*flipaleafandrotateitby-50degreesin2dspaceattheendoftheanimation*/ 100%{-webkit-transform:scale(-1,1)rotate(-50deg);} }

javascript代码

javascript code
复制内容到剪贴板

/*definethenumberofleavestobeudintheanimation*/ 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’; } /* usanimgelementtocreateeachleaf.“leaves.css”implementstwospin animationsfortheleaves:clockwispinandcounterclockwispinandflip.this functiondetermineswhichofthespinanimationsshouldbeappliedtoeachleaf. */ functioncreatealeaf() { /*startbycreatingawrapperdiv,andanemptyimgelement*/ varleafdiv=document.createelement(‘div’); varimage=document.createelement(‘img’); /*randomlychooaleafimageandassignittothenewlycreatedelement*/ image.src=‘images/realleaf’+randominteger(1,5)+‘.png’; leafdiv.style.top=“-100px”; /*positiontheleafatarandomlocationalongthescreen*/ leafdiv.style.left=pixelvalue(randominteger(0,500)); /*randomlychoo食品安全常识aspinanimation*/ varspinanimationname=(math.random()<0.5)?‘clockwispin’:‘counterclockwispinandflip’; /*tthe-webkit-animation-namepropertywiththevalues*/ leafdiv.style.webkitanimationname=‘fade,drop’; image.style.webkitanimationname=spinanimationname; /*figureoutarandomdurationforthefadeanddropanimations*/ varfadeanddropduration=durationvalue(randomfloat(5,11)); /*figureoutanotherrandomdurationforthespinanimation*/ varspinduration=durationvalue(randomfloat(4,8)); /*tthe-webkit-animation-durationpropertywiththevalues*/人力资源六大板块 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,fal);

以上就是本文的全部内容，希望对大家学习有所帮助。