Um den im Bild gezeigten Effekt zu erzielen (fallende Blätter):
HTML-Code:
<!DOCTYPE html><html><head> <title>HTML5-Blattfallanimation</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>Dies ist eine Animation mit fallenden Blättern, die auf basiert webkit< /em> </div> </body></html>CSS-Code: body{ Hintergrundfarbe: #4E4226;}#container { Position: relative; Breite: 500px; Rand: 10px; Überlauf: ausgeblendet; Hintergrund: #4E4226 url('images/backgroundLeaves.jpg') ; Höhe: 100 %;}#message{ Position: absolut; Breite: 100 %; Hintergrund: transparente URL ('images/textBackground.png') : Mitte; Polsterung: 20px 10px; -webkit-box-sizing: border-box; 100 % 100 %; z-index: 1;}em { Font-Weight: Bold;}#leafContainer -count: unendlich; -webkit-animation-direction: normal; -webkit-animation-timing-function: linear;}#leafContainer > div > img { position: absolute; height: 100px; out; -webkit-transform-origin: 50% -100%;}@-webkit-keyframes fade{ 0% { opacity: 1; } 95 % { Deckkraft: 1; } 100 % { Deckkraft: 0; }}@-webkit-keyframes drop{ 0 % { -webkit-transform: Translate(0px, -50px); Translate(0px, 650px); }}@-webkit-keyframes im UhrzeigersinnSpin{ 0% { -webkit-transform: rotieren(-50 Grad); } 100 % { -webkit-transform: rotieren (50 Grad); (50 Grad); } 100 % { -webkit-transform: scale(-1, 1) rotate(-50 Grad); }}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'); -100px; leafDiv.style.left = pixelValue(randomInteger(0, 500)); fadeAndDropDuration + ', ' + fadeAndDropDuration; 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) ? 'im UhrzeigersinnSpin': 'gegen den Uhrzeigersinn'; image.style.webkitAnimationName = spinAnimationName; var spinDuration = spinDuration; .addEventListener('load', init, false); PS: Schauen wir uns an, wie HTML5-Canvas fortlaufende Frame-Bilder verarbeitet. Der folgende Code basiert auf IE8 und höher. <!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;//Initialisierungsparameter var img = null;var ctx = null;var imageReady = false;window.onload = function() { var canvas = document.getElementById(animation_canvas); canvas.width = canvas.parentNode.clientHeight; if (!canvas.getContext) { console.log(Canvas wird nicht unterstützt. Bitte installieren Sie einen HTML5-kompatiblen Browser.); return; // 2D-Kontext von Canvas abrufen und Rechteck zeichnen ctx = Canvas.getContext(2d); ctx.fillRect(0, 0, Canvas.width, Canvas.height); img = document.createElement('img'); ); img.src = images/ab0.png; img.onload = geladen();} //Stellen Sie sicher, dass der Animationszyklus erst beginnt, nachdem das Bild geladen wurde() { imageReady = true; setTimeout(update, 1000/3);//Füge 3 Bilder pro Sekunde Intervall-Timer hinzu}function redraw() { ctx.fillRect(0, 0, 460, 460); img, 0, 0, 232, 180);} //Damit das Bild mit der angegebenen Geschwindigkeit animiert wird, müssen wir die verstrichene Zeit im Auge behalten und dann die Frames basierend auf der jedem Frame zugewiesenen Zeit abspielen. Die grundlegenden Schritte sind: //1. Legen Sie die Animationsgeschwindigkeit (msPerFrame) in Bildern pro Sekunde fest. //2. Wenn Sie das Spiel wiederholen, berechnen Sie, wie viel Zeit (Delta) seit dem letzten Frame vergangen ist. //3. Wenn die verstrichene Zeit ausreicht, um den Animationsframe abzuschließen, dann spielen Sie diesen Frame ab und setzen Sie das kumulative Delta auf 0. //4. Wenn die verstrichene Zeit nicht ausreicht, merken (akkumulieren) Sie die Delta-Zeit (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; img.src='images/ab'+frame+'.png'; frame++; if(frame >= 3) frame = 0; //Wenn der Frame gezeichnet und vorgerückt wird, wird der Timer zurückgesetzt. }else{ acDelta += delta; } lastUpdateTime = Date.now();}//requestAnimFrame führt grundsätzlich setTimeout aus, aber der Browser weiß, dass Sie den Frame rendern, sodass er die Zeichenschleife und die Interaktion mit der restlichen Seite optimieren kann Reflow. //In einigen Fällen ist setTimeout besser zu verwenden als requestAnimFrame, insbesondere für Mobiltelefone. //Das Folgende gilt für den Aufruf von requestAnimFrame in verschiedenen Browsern. Die Standarderkennungsmethode lautet wie folgt: window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window. oRequestAnimationFrame ||. window.msRequestAnimationFrame ||. function( callback ){ window.setTimeout(callback, 1000 / 3); //Wenn die requestAnimFrame-Unterstützung nicht verfügbar ist, können Sie trotzdem das integrierte setTimeout verwenden };})();</script></head><body style=position:absolute;margin:0;padding :0. ;width:100%;height:100%;> <canvas id=animation_canvas></canvas></body></html> ZusammenfassenDas Obige ist die vom Herausgeber eingeführte Implementierung der Blattfallanimation auf Basis von HTML5+Webkit. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!