html5怎么添加图片动画效果

htML5添加图片动画效果的方法：1、利用css3 animation的steps实现SpirIT精灵动画；2、利用HTML5 canvas实现Gif图片。

本教程操作环境：windows7系统、html5& & css3版，DELL G3电脑。

html5添加图片动画效果的方法：

方法一：利用css3 animation的steps实现spirit精灵动画；

在应用 CSS3 渐变/动画时，有个控制时间的属性timing-function> 。它的取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数。

steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

那么有了这个steps()，我们就可以实现web中常见的sprite 精灵动画了，见demo：

!DOCTYPE html>
    html>
        head>
        meta charset="utf-8">
        meta http-equiv="X-UA-Compatible" content="IE=Edge">
        title>
    /title>
        link rel="stylesheet" href="">
        style>
    .bird{
    background: url(bird.png);
    width: 140px;
    height:85px;
    animation: bird 2s steps(8) infinite;
 }
    @keyframes bird{
       From {
              background-position: 0 0;
       }
       to {
              background-position: -800% 0px;
       }
    }
        /style>
        /head>
        body>
           div>
    /div>
        /body>
    /html>
    

方法二：利用html5 canvas实现gif图片；

利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画，见demo：

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        title>
    canvas帧--实现动画/title>
        style>
        *{
    padding:0;
    margin:0;
}
        canvas{
    display:block;
background:white}
        /style>
    /head>
    body>
        canvas>
    /canvas>
    script>
        VAR imgPic = new Image();
        imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png';
        var canvas = document.querySelector('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var ctx = canvas.getContext('2d');
    imgPic.onload = function () {
        drawImg()    }
        var i = 0;
        var lastTime = new Date().getTime();
        var delatime;
        var timer = 0;
    function drawImg() {
            window.requestAnimationFrame(drawImg);
            var now = new Date().getTime();
            delatime = now - lastTime;
            lastTime = now;
            timer += delatime;
            if (timer >
 200) {
                i++;
                if (i >
     7) i = 0;
            timer = 0        }
            console.LOG(delatime)        ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);
    }
    /script>
    /body>
    /html>
    

相关学习推荐：html视频教程

以上就是html5怎么添加图片动画效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！