写真に示すような効果を実現するには (葉が落ちます):
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> <div id=container> <div id=leafContainer></div> <div id=message> <em>これは、以下に基づく落ち葉アニメーションです。 webkit</em> </div> </div> </body></html>css コード: body{ 背景色: #4E4226;}#container { 位置: 相対; 幅: 700px; 500 ピクセル; マージン: 10 ピクセル; オーバーフロー: 非表示; 境界線: 4 ピクセル ソリッド #5C090A; url('images/backgroundLeaves.jpg') 左上; 位置: 絶対; ; 高さ: 100%;}#message{ 位置: 絶対; 160px;幅: 100%; 高さ: 300px; 背景: 透明 URL('images/textBackground.png'); フォントサイズ: 220%; : センター; パディング: 20px 10px; -webkit-box-sizing: -webkit-background-size: 100% 100%; em { フォントの太さ: 太字; フォント スタイル: 通常; }#leafContainer > div { 位置: 絶対; 高さ: 100 ピクセル; -カウント: 無限; -webkit-アニメーションの方向: 通常; -webkit-アニメーションのタイミング関数: リニア;}#leafContainer > div > img { 位置: 絶対; 幅: 100px; -webkit-アニメーションの反復数: 代替; -webkit-アニメーションのタイミング:アウト; -webkit-transform-origin: 50% -100%;}@-webkit-keyframes fade{ 0% { 不透明度: 1; 95% { 不透明度: 1; } 100% { 不透明度: 0; }}@-webkit-keyframes ドロップ{ 0% { -webkit-transform: 変換(0px, -50px) } 100% { -webkit-transform:翻訳(0px, 650px); }}@-webkit-keyframes 時計回り{ 0% { -webkit-transform: 回転(-50度); } 100% { -webkit-transform: 回転(50度); }}@-webkit-keyframes 反時計回りSpinAndFlip { 0% { -webkit-transform: スケール(-1, 1) 回転(50度); } 100% { -webkit-transform:scale(-1, 1) 回転(-50度); }}js コード: const NUMBER_OF_LEAVES = 30; function init(){ var context = document.getElementById('leafContainer'); for (var i = 0; i < NUMBER_OF_LEAVES; i++) {container.appendChild(createALeaf()); }}関数randomInteger(low, high){ return low + Math.floor(Math.random() * (高 - 低));}関数randomFloat(low, high){ return low + Math.random() * (高 - 低);}関数pixelValue(value){ 戻り値+ 'px';}関数durationValue(value){戻り値+ 's';}関数createALeaf(){varleafDiv = document.createElement('div'); -100px; リーフDiv.style.left = ピクセル値(randomInteger(0, 500)); リーフDiv.style.webkitAnimationName = 'フェード、ドロップ'; fadeAndDropDuration + ', ' + fadeAndDropDuration;リーフ遅延 =durationValue(randomFloat(0, 5)); リーフDiv.style.webkitAnimationDelay = リーフ遅延 + ', ' + var image = document.createElement('img'); 1, 5) + '.png'; var スピンアニメーション名 = (Math.random() < 0.5) ? '時計回りスピン' : '反時計回りスピンアンドフリップ'; image.style.webkitAnimationName = varスピンDuration(4, 8)); .addEventListener('load', init, false); PS: html5 キャンバスが連続フレーム画像をどのように処理するかを見てみましょう。次のコードは IE8 以降に基づいています。 <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content=width=デバイス幅、initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0、 user-scalable=no/><title>キャンバス デモ</title><script>var Canvas = null;//初期化パラメータ var img = null;var ctx = null;var imageReady = false;window.onload = function() { var Canvas = document.getElementById(animation_canvas); Canvas.height = Canvas.parentNode.clientHeight; if (!canvas.getContext) console.log(キャンバスはサポートされていません。HTML5 互換のブラウザをインストールしてください。) } // キャンバスの 2D コンテキストを取得し、長方形を描画します。 ctx = Canvas.getContext(2d); ctx.fillRect(0, 0, Canvas.height); img = document.createElement('img') ); img.src =images/ab0.png; img.onload =loaded();} //画像がロードされた後にのみアニメーションサイクルが開始されるようにする functionload() { imageReady = true; setTimeout(update, 1000/3);// 1 秒あたり 3 フレームのインターバル タイマーを追加} function redraw() { ctx.fillStyle=black; ctx.drawImage (画像、0、0、232、180);} //指定された速度で画像をアニメーション化するには、経過時間を追跡し、各フレームに割り当てられた時間に基づいてフレームを再生する必要があります。基本的な手順は次のとおりです。 //1. アニメーション速度 (msPerFrame) を 1 秒あたりのフレーム数で設定します。 //2. ゲームをループするときに、最後のフレームから経過した時間 (デルタ) を計算します。 //3. 経過時間がアニメーション フレームを完了するのに十分な場合は、このフレームを再生し、累積デルタを 0 に設定します。 //4. 経過時間が十分でない場合は、デルタ時間 (acDelta) を記憶 (蓄積) します。 var Frame = 0;var lastUpdateTime = 0;var acDelta = 0;var msPerFrame = 200;function update() { requestAnimFrame(update); //console.log(Date.now; (),lastUpdateTime); if (acDelta > msPerFrame){ acDelta = 0; img.src='images/ab'+frame+'.png'; if(frame >= 3) Frame = 0; //フレームが描画され、フレームが進むとタイマーがリセットされます。 }else{ acDelta += delta; } lastUpdateTime = Date.now();}//requestAnimFrame は基本的に setTimeout を実行しますが、ブラウザはフレームをレンダリングしていることを認識しているため、描画ループと残りのページとの対話方法を最適化できます。リフロー。 //場合によっては、特に携帯電話の場合、requestAnimFrame よりも setTimeout を使用した方がよい場合があります。 //以下は異なるブラウザで requestAnimFrame を呼び出した場合の標準的な検出方法です。 window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 関数(コールバック){ window.setTimeout(コールバック, 1000) / 3); // requestAnimFrame サポートが利用できない場合でも、組み込みの setTimeout を使用できます };})();</script></head><body style=position:absolute;margin:0;padding :0. 幅:100%;高さ:100%;> <canvas id=animation_canvas></canvas></body></html>要約する上記は、編集者が紹介した HTML5+Webkit をベースにした葉落ちアニメーションの実装です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！