实现如图所示的东西效果（落叶下落）：
html代码：
<!doctype html> <html> <head> <title>html5树叶飘落动画</title> <meta charset="utf-8"> <meta name="viewport" content="width=500px, initial-scale=0.64"> <link rel="stylesheet" href="leaves.css" type="text/css"> <script src="leaves.js" type="text/javascript"></script> </head> <body> <p id="container"> <p id="leafcontainer"></p> <p id="message"> <em>这是基于webkit的落叶动画</em> </p> </p> </body> </html> css代码： body{ background-color: #4e4226; } #container { position: relative; height: 700px; width: 500px; margin: 10px auto; overflow: hidden; border: 4px solid #5c090a; background: #4e4226 url('images/backgroundleaves.jpg') no-repeat top left; } #leafcontainer { position: absolute; width: 100%; height: 100%; } #message{ position: absolute; top: 160px; width: 100%; height: 300px; background:transparent url('images/textbackground.png') repeat-x center; color: #5c090a; font-size: 220%; font-family: 'georgia'; text-align: center; padding: 20px 10px; -webkit-box-sizing: border-box; -webkit-background-size: 100% 100%; z-index: 1; } em { font-weight: bold; font-style: normal; } #leafcontainer > p { position: absolute; width: 100px; height: 100px; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: linear; } #leafcontainer > p > img { position: absolute; width: 100px; height: 100px; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -webkit-transform-origin: 50% -100%; } @-webkit-keyframes fade{ 0% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes drop{ 0% { -webkit-transform: translate(0px, -50px); } 100% { -webkit-transform: translate(0px, 650px); } } @-webkit-keyframes clockwisespin{ 0% { -webkit-transform: rotate(-50deg); } 100% { -webkit-transform: rotate(50deg); } } @-webkit-keyframes counterclockwisespinandflip { 0% { -webkit-transform: scale(-1, 1) rotate(50deg); } 100% { -webkit-transform: scale(-1, 1) rotate(-50deg); } } js代码： const number_of_leaves = 30; function init(){ var container = document.getelementbyid('leafcontainer'); for (var i = 0; i = 3) frame = 0; //当绘制后且帧推进完，计时器就会重置。 }else{ acdelta += delta; } lastupdatetime = date.now(); } //requestanimframe的作用基本上就是settimeout，但浏览器知道你正在渲染帧，所以它可以优化绘制循环，以及如何与剩下的页面回流。 //在某些情况下，settimeout比requestanimframe更好用，特别是对于手机。 //以下是在不同的浏览器上调用requestanimframe的情况也不同，标准的检测方法如下： window.requestanimframe = (function(){ return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function( callback ){ window.settimeout(callback, 1000 / 3); //如果requestanimframe支持不可用，还是可以用回内置的settimeout。 }; })(); </script> </head> <body style="position:absolute;margin:0;padding:0;width:100%;height:100%;"> <canvas id="animation_canvas"></canvas> </body> </html>
相关推荐：
使用html5实现树叶飘落的效果
jquery+css3实现树叶飘落特效_jquery
逼真的html5树叶飘落动画_html5教程技巧
以上就是html5和webkit实现树叶飘落动画的详细内容。