To achieve the effect as shown in the picture (leaves falling):
html code:
<!DOCTYPE html><html><head> <title>HTML5 leaf falling animation</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> <div id=container> <div id=leafContainer></div> <div id=message> <em>This is a falling leaf animation based on webkit< /em> </div> </div> </body></html>css code: 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 > div { position: absolute; width: 100px; height: 100px; -webkit-animation-iteration -count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: linear;}#leafContainer > div > 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 code: const NUMBER_OF_LEAVES = 30; function init(){ var container = document.getElementById('leafContainer'); for (var i = 0; i < NUMBER_OF_LEAVES; i++) { container.appendChild(createALeaf()); }}function randomInteger(low, high){ return low + Math.floor(Math.random() * (high - low));}function randomFloat(low, high){ return low + Math.random() * (high - low);}function pixelValue(value){ return value + 'px';}function durationValue(value){ return value + 's';}function createALeaf(){ var leafDiv = document.createElement('div'); leafDiv.style.top = -100px; leafDiv.style.left = pixelValue(randomInteger(0, 500)); leafDiv.style.webkitAnimationName = 'fade, drop'; var fadeAndDropDuration = durationValue(randomFloat(5, 11)); leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration; var leafDelay = durationValue(randomFloat(0, 5)); leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay; var image = document.createElement('img'); image.src = 'images/realLeaf' + randomInteger( 1, 5) + '.png'; var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip'; image.style.webkitAnimationName = spinAnimationName; var spinDuration = durationValue(randomFloat(4, 8)); image.style.webkitAnimationDuration = spinDuration; leafDiv.appendChild(image); return leafDiv;}window .addEventListener('load', init, false); PS: Let’s take a look at how html5 canvas handles continuous frame images. The following code is based on IE8 and above. <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no/><title>Canvas Demo</title><script>var canvas = null;//Initialization parameter var img = null;var ctx = null;var imageReady = false;window.onload = function() { var canvas = document.getElementById(animation_canvas); canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; if (!canvas.getContext) { console.log(Canvas not supported. Please install a HTML5 compatible browser.); return; } // get 2D context of canvas and draw rectangel ctx = canvas.getContext(2d); ctx.fillStyle=black; ctx.fillRect(0, 0, canvas.width, canvas.height); console.log(canvas.height); img = document.createElement('img' ); img.src = images/ab0.png; img.onload = loaded();} //Ensure that the animation cycle starts only after the image is loaded function loaded() { imageReady = true; setTimeout(update, 1000/3);//Add 3 frames per second interval timer}function redraw() { ctx.fillStyle=black; ctx.fillRect(0, 0, 460, 460); ctx.drawImage (img, 0, 0, 232, 180);} //In order for the image to animate at the specified speed, we have to keep track of the time that has elapsed and then play the frames based on the time allocated to each frame. The basic steps are: //1. Set the animation speed (msPerFrame) in frames per second. //2. When you loop the game, calculate how much time (delta) has passed since the last frame. //3. If the time that has passed is enough to complete the animation frame, then play this frame and set the cumulative delta to 0. //4. If the elapsed time is not enough, then remember (accumulate) the delta time (acDelta). var frame = 0;var lastUpdateTime = 0;var acDelta = 0;var msPerFrame = 200;function update() { requestAnimFrame(update); var delta = Date.now() - lastUpdateTime; //console.log(Date.now (),lastUpdateTime); if (acDelta > msPerFrame){ acDelta = 0; redraw(); img.src='images/ab'+frame+'.png'; frame++; if(frame >= 3) frame = 0; //When the frame is drawn and the frame is advanced, the timer will be reset. }else{ acDelta += delta; } lastUpdateTime = Date.now();}//requestAnimFrame basically does setTimeout, but the browser knows you are rendering the frame, so it can optimize the draw loop and how to interact with the rest Page reflow. //In some cases, setTimeout is better to use than requestAnimFrame, especially for mobile phones. //The following is the case of calling requestAnimFrame on different browsers. The standard detection method is as follows: window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window. oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 3); //If requestAnimFrame support is not available, you can still use the built-in setTimeout };})();</script></head><body style=position:absolute;margin:0;padding:0. ;width:100%;height:100%;> <canvas id=animation_canvas></canvas></body></html> SummarizeThe above is the implementation of leaf falling animation based on HTML5+Webkit introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!