Pour obtenir l'effet présenté sur l'image (feuilles qui tombent) :
code html :
<!DOCTYPE html><html><head> <title>Animation de chute de feuilles HTML5</title> <meta charset=utf-8> <meta name=viewport content=width=500px, initial-scale=0.64> <link rel =feuille de style 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>Il s'agit d'une animation de feuille tombante basée sur webkit< /em> </div> </div> </body></html>code css : corps{ background-color : #4E4226;}#container { position : relative hauteur : 700 px ; 500 px ; marge : 10 px automatique ; débordement : caché ; bordure : 4px solide #5C090A ; arrière-plan : #4E4226 url('images/backgroundLeaves.jpg') pas de répétition en haut à gauche ;}#leafContainer { position : absolue ; ; hauteur : 100 % ;}#message{ position : absolue ; largeur : 100 % ; hauteur : 300 px ; arrière-plan : url transparent ('images/textBackground.png') centre de répétition ; couleur : #5C090A ; taille de police : 220 % ; : centre ; remplissage : 20 px 10 px ; -webkit-box-sizing : border-box ; -webkit-background-size : 100 % 100 % ; z-index : 1 ;}em { font-weight : bold ; font-style : normal ;}#leafContainer > div { position : largeur absolue ; hauteur : 100 px ; -count : infini ; -webkit-animation-direction : normal ; -webkit-animation-timing-function : linéaire ;}#leafContainer > div > img { position : absolue ; largeur : 100 px ; hauteur : 100 px ; -webkit-animation-itération-count : infini ; -webkit-animation-direction : alternative ; out ; -webkit-transform-origin : 50 % -100 % ;}@-webkit-keyframes fade{ 0 % { opacité : 1 ; } 95 % { opacité : 1 ; } 100 % { opacité : 0 ; }}@-webkit-keyframes drop{ 0 % { -webkit-transform : translate(0px, -50px) ; traduire(0px, 650px); }}@-webkit-keyframes dans le sens horaireSpin{ 0% { -webkit-transform : rotation (-50deg); } 100 % { -webkit-transform : rotation (50deg); }}@-webkit-keyframes dans le sens antihoraireSpinAndFlip { 0% { -webkit-transform : scale(-1, 1) rotation (50deg); } 100% { -webkit-transform: scale(-1, 1) rotation(-50deg); }}code js : const NUMBER_OF_LEAVES = 30 ; function init(){ var conteneur = document.getElementById('leafContainer'); for (var i = 0; i < NUMBER_OF_LEAVES; i++) { containers.appendChild(createALeaf()); }}fonction randomInteger(low, high){ return low + Math.floor(Math.random() * (haut - bas));}function randomFloat(low, high){ return low + Math.random() * (high - low);}function pixelValue(value){ valeur de retour + 'px';}fonction duréeValue(valeur){ valeur de retour + 's';}fonction createALeaf(){ var leafDiv = document.createElement('div'); -100px; leafDiv.style.left = pixelValue (randomInteger (0, 500)); leafDiv.style.webkitAnimationName = 'fondu, chute'; var fadeAndDropDuration = duréeValue (randomFloat (5, 11)); fadeAndDropDuration + ', ' + fadeAndDropDuration var; leafDelay = duréeValue(randomFloat(0, 5)); leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay; var image = document.createElement('img'); 1, 5) + '.png'; var spinAnimationName = (Math.random() < 0,5) ? 'dans le sens horaireSpin' : 'dans le sens antihoraireSpinAndFlip'; image.style.webkitAnimationName = spinAnimationName; var spinDuration = durationValue(randomFloat(4, 8)); image.style.webkitAnimationDuration = spinDiv.appendChild(image); .addEventListener('load', init, false); PS : Voyons comment le canevas html5 gère les images à image continue. Le code suivant est basé sur IE8 et supérieur. <!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>Démo Canvas</title><script>var canvas = null;//Paramètre d'initialisation 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; console.log (Canvas non pris en charge. Veuillez installer un navigateur compatible HTML5.); return ; // récupère le contexte 2D du canevas et dessine un rectangle. ctx = toile.getContext(2d); ctx.fillStyle=noir; ctx.fillRect(0, 0, toile.largeur, toile.hauteur); console.log(toile.hauteur); ); img.src = images/ab0.png; img.onload = chargé();} //Assurez-vous que le cycle d'animation démarre seulement après le chargement de l'image functionloaded() { imageReady = true; setTimeout (mise à jour, 1000/3);//Ajouter un minuteur d'intervalle de 3 images par seconde}function redraw() { ctx.fillStyle=black; ctx.fillRect(0, 0, 460, 460); img, 0, 0, 232, 180);} //Pour que l'image s'anime à la vitesse spécifiée, nous devons garder une trace du temps écoulé, puis lire les images en fonction du temps alloué à chaque image. Les étapes de base sont : //1. Définir la vitesse d'animation (msPerFrame) en images par seconde. //2. Lorsque vous bouclez le jeu, calculez combien de temps (delta) s'est écoulé depuis la dernière image. //3. Si le temps écoulé est suffisant pour terminer l'image d'animation, lisez cette image et définissez le delta cumulé sur 0. //4. Si le temps écoulé n'est pas suffisant, rappelez-vous (accumulez) le temps delta (acDelta). var frame = 0;var lastUpdateTime = 0;var acDelta = 0;var msPerFrame = 200;function update() { requestAnimFrame(update); var delta = Date.now() - lastUpdateTime; (),lastUpdateTime si (acDelta > msPerFrame){ acDelta = 0 ; img.src='images/ab'+frame+'.png'; frame++; if(frame >= 3) frame = 0; //Lorsque le cadre est dessiné et avancé, le minuteur sera réinitialisé. }else{ acDelta += delta; } lastUpdateTime = Date.now();}//requestAnimFrame fait essentiellement setTimeout, mais le navigateur sait que vous rendez le cadre, il peut donc optimiser la boucle de dessin et comment interagir avec le reste de la page. refusion. //Dans certains cas, il est préférable d'utiliser setTimeout que requestAnimFrame, en particulier pour les téléphones mobiles. //Ce qui suit est le cas de l'appel de requestAnimFrame sur différents navigateurs. La méthode de détection standard est la suivante : window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window. oRequestAnimationFrame. || window.msRequestAnimationFrame || fonction(rappel){ window.setTimeout(rappel, 1000 / 3); //Si la prise en charge de requestAnimFrame n'est pas disponible, vous pouvez toujours utiliser le setTimeout intégré };})();</script></head><body style=position:absolute;margin:0;padding :0. ;largeur:100%;hauteur:100%;> <canvas id=animation_canvas></canvas></body></html> RésumerCe qui précède est l'implémentation de l'animation de chute de feuilles basée sur HTML5+Webkit introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !