code báo đen chạy ở chân trang

Để làm con báo hay bất cứ con nào chạy bạn phải có sprite - dịch khung hình cho dễ nhớ của nó gợi ý nên tìm Gif -> convert online thành sprite -> psd -> png xong ta có 1 sprite của con gì đó

B1 Để add báo vào Đầu tiên là css

    <style media="screen" type="text/css">
    div.bao {
   width: 160px;
   height: 40px;
    position :absolute;
    bottom: 0px;
   
    -webkit-animation: mymove 10s infinite; /* Chrome, Safari, Opera */
    animation: mymove 10s infinite;
}
div.bao{
    -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {bottom:  0px;
        left:-160px;}
    to {bottom: 90%;
left: 100%;
    }
}
/* Standard syntax */
@keyframes mymove {
 from {bottom:  0px;
        left:-160px}
    to {bottom: 0%;
left: 100%;
    }
}
</style>

B2 Tiếp là Html

<div class="bao">         <canvas id="coinAnimation"></canvas>
</div>

B4 Sau đó là javascript

<script>
        //<![CDATA[

        // Copyright 2013 William Malone (www.williammalone.com)
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

(function() {
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());
(function () {
var coin,
coinImage,
canvas;
function gameLoop () {
 window.requestAnimationFrame(gameLoop);
 coin.update();
 coin.render();
}
function sprite (options) {
var that = {},
frameIndex = 0,
tickCount = 0,
ticksPerFrame = options.ticksPerFrame || 0,
numberOfFrames = options.numberOfFrames || 1;
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;
that.update = function () {
            tickCount += 1;
            if (tickCount > ticksPerFrame) {
tickCount = 0;
                // If the current frame index is in range
                if (frameIndex < numberOfFrames - 1) {                     // Go to the next frame
                    frameIndex += 1;
                } else {
                    frameIndex = 0;
                }
            }
        };
that.render = function () {
 // Clear the canvas
 that.context.clearRect(0, 0, that.width, that.height);

 // Draw the animation
 that.context.drawImage(
   that.image,
   frameIndex * that.width / numberOfFrames,
   0,
   that.width / numberOfFrames,
   that.height,
   0,
   0,
   that.width / numberOfFrames,
   that.height);
};
return that;
}
// Get canvas
canvas = document.getElementById("coinAnimation");
canvas.width = 160;
canvas.height = 60;
// Create sprite sheet
coinImage = new Image(); // Create sprite
coin = sprite({
context: canvas.getContext("2d"),
width: 1120,
height: 60,
image: coinImage,
numberOfFrames: 8,
ticksPerFrame: 4
});
// Load sprite sheet
coinImage.addEventListener("load", gameLoop);
coinImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXaCthJTo-cZeXpnahUKHpSBdrEmSigkqowOiH3MBjO9WZbvWAUs1JAM-sV9WHQZuyetASJeK2OcGsouGBykLGce5M-S2F3Ld9IHNLLJeVKyuOGCVGv-lp1KgGkLJfW_FhL2mWfLx-mOw/s1600/s.png";
} ());
//]]>
        </script>

Chúc các bạn may mắn lần sau