逼真的HTML5树叶飘落动画

2020-03-24 16:33:25

字体：大中小

来源：转载

供稿：网友

这款HTML5树叶飘落动画是基于webkit内核的，也就是说要在webkit内核的浏览器上才能使用这款动画。源码下载演示地址HTML代码XML/HTML Code复制内容到剪贴板
divid= container !--Thecontainerisdynamicallypopulatedusingtheinitfunctioninleaves.js-- !--Itsdimensionsandpositionaredefinedusingitsidselectorinleaves.css-- divid= leafContainer /div !--itsappearance,dimensions,andpositionaredefinedusingitsidselectorinleaves.css-- divid= message em 这是基于webkit的落叶动画 /em /div /div
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. Eachofthesepropertiestakestwohtml' target='_blank'>values.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);} }
/*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);html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：网页制作中使用规范的HTML代码的几点

下一篇：html实现一个动图--哆啦A梦