Para obter o efeito mostrado na imagem (folhas caindo):
código HTML:
<!DOCTYPE html><html><head> <title>Animação de queda de folhas HTML5</title> <meta charset=utf-8> <meta name=viewport content=width=500px, escala inicial=0,64> <link rel =folha de estilo 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>Esta é uma animação de folha caindo baseada em webkit< /em> </div> </div> </body></html>código css: body{ background-color: #4E4226;}#container { posição: altura relativa: 700px; 500px; margem: 10px automático; estouro: oculto; borda: 4px sólido #5C090A; fundo: #4E4226 url('images/backgroundLeaves.jpg') sem repetição no canto superior esquerdo;}#leafContainer {posição: absoluto; ; altura: 100%;}#mensagem{ posição: topo absoluto: 160px; largura: 100%; altura: 300px; fundo:transparent url('images/textBackground.png') repetir-x cor: #5C090A; : centro; preenchimento: 20px 10px; -webkit-box-sizing: border-box; 100% 100%; índice z: 1;}em { peso da fonte: negrito; estilo da fonte: normal;}#leafContainer > div { posição: largura absoluta: 100px; -count: infinito; -webkit-animation-direction: normal; -webkit-animation-timing-function: linear;}#leafContainer > div > img { posição: largura absoluta: 100px; altura: 100px; -webkit-animation-iteration-count: infinito; -webkit-animation-direction: alternativo; out; -webkit-transform-origin: 50% -100%;}@-webkit-keyframes fade{ 0% { opacidade: 1; } 95% { opacidade: 1; } 100% { opacidade: 0; }}@-webkit-keyframes drop{ 0% { -webkit-transform: translate(0px, -50px } 100% { -webkit-transform: traduzir(0px, 650px }}@-webkit-keyframes clockwiseSpin{ 0% {); -webkit-transform: girar (-50deg } 100% { -webkit-transform: girar (50deg }}@-webkit-keyframes anti-horárioSpinAndFlip { 0% { -webkit-transform: escalar (-1, 1) girar (50 graus); 100% { -webkit-transform: escala (-1, 1) girar (-50 graus); }}código js: const NUMBER_OF_LEAVES = 30; função init(){ var container = document.getElementById('leafContainer'); }}função randomInteger(low, high){ return low + Math.floor(Math.random() * (alto - baixo));}function randomFloat(low, high){ return low + Math.random() * (high - low);}function pixelValue(value){ valor de retorno + 'px';}função DuraçãoValue(valor){ valor de retorno + 's';}função createALeaf(){ var leafDiv = document.createElement('div'). -100px; leafDiv.style.left = pixelValue(randomInteger(0, 500)); leafDiv.style.webkitAnimationName = 'desaparecer, soltar'; fadeAndDropDuration + ', ' + fadeAndDropDuration var; leafDelay = duraçãoValue(randomFloat(0, 5)); leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay var image = document.createElement('img'); 1, 5) + '.png'; var spinAnimationName = (Math.random() <0,5) ?'clockwiseSpin': 'counterclockwiseSpinAndFlip'; image.style.webkitAnimationName = spinAnimationName; .addEventListener('carregar', inicialização, falso); PS: Vamos dar uma olhada em como o canvas HTML5 lida com imagens de quadro contínuo. O código a seguir é baseado no IE8 e superior. <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content=width=device-width, escala inicial=1,0, escala mínima=1,0, escala máxima=1,0, user-scalable=no/><title>Canvas Demo</title><script>var canvas = null;//Parâmetro de inicialização var img = null;var ctx = null;var imageReady = false;window.onload = function() { var canvas = document.getElementById(animation_canvas); console.log(Canvas não suportado. Instale um navegador compatível com HTML5.); // obtém o contexto 2D do canvas e desenha o retângulo.); ctx = canvas.getContext(2d); ctx.fillStyle=preto;ctx.fillRect(0, 0, canvas.width, canvas.height); ); img.src = images/ab0.png; img.onload = carregado();} //Garanta que o ciclo de animação comece somente após o carregamento da imagem functionloaded() { imageReady = true; setTimeout(atualização, 1000/3);//Adicionar temporizador de intervalo de 3 quadros por segundo}função redraw() { ctx.fillStyle=black; imagem, 0, 0, 232, 180);} //Para que a imagem seja animada na velocidade especificada, temos que acompanhar o tempo decorrido e então reproduzir os frames com base no tempo alocado para cada frame. Os passos básicos são: //1. Defina a velocidade da animação (msPerFrame) em quadros por segundo. //2. Ao fazer um loop no jogo, calcule quanto tempo (delta) se passou desde o último quadro. //3. Se o tempo decorrido for suficiente para completar o quadro de animação, reproduza este quadro e defina o delta cumulativo como 0. //4. Se o tempo decorrido não for suficiente, lembre-se (acumule) o tempo delta (acDelta). var frame = 0;var lastUpdateTime = 0;var acDelta = 0;var msPerFrame = 200;function update() { requestAnimFrame(update). (),lastUpdateTime); if (acDelta > msPerFrame){ acDelta = 0; img.src='images/ab'+frame+'.png'; frame++; if(frame >= 3) frame = 0; }else{ acDelta += delta } lastUpdateTime = Date.now();}//requestAnimFrame basicamente faz setTimeout, mas o navegador sabe que você está renderizando o quadro, para que possa otimizar o loop de desenho e como interagir com o resto da página. refluxo. //Em alguns casos, setTimeout é melhor usar do que requestAnimFrame, especialmente para celulares. //O seguinte é o caso de chamar requestAnimFrame em navegadores diferentes. O método de detecção padrão é o seguinte: window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window. oRequestAnimationFrame. || window.msRequestAnimationFrame || função(retorno de chamada){ window.setTimeout(retorno de chamada, 1000 / 3); //Se o suporte requestAnimFrame não estiver disponível, você ainda poderá usar o setTimeout integrado };})();</script></head><body style=position:absolute;margin:0;padding :0. ;largura:100%;altura:100%;> <canvas id=animation_canvas></canvas></body></html> ResumirO texto acima é a implementação da animação de queda de folhas baseada em HTML5 + Webkit apresentada pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!