zoukankan      html  css  js  c++  java
  • CSS3 Sprite帧动画

    使用CSS3 Sprite(雪碧图)可以制作帧动画,如下

    效果:

     

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"> 
        <title></title>
        <style> 
        div{
            width: 200px; /* 单帧显示宽度 */
            height: 312px; /* 单帧高度 */
            background: url(https://www.html5tricks.com/demo/css3-sprite-zombie-walking/img/walkingdead.png);
            animation: mymove 1.5s steps(10) infinite; /* 7 就是帧数 */
            -webkit-animation: mymove 1.5s steps(10) infinite; /* 7 就是帧数 */
        }
        @keyframes mymove{
            0%  {background-position:     0px 0;}
            100%   {background-position:  -2000px 0;} /* 图片总宽度 */
        }
        @-webkit-keyframes mymove{
            0%  {background-position:     0px 0;}
            100%   {background-position:  -2000px 0;} /* 图片总宽度 */
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

    再来个例子——其实就是换张图:

    效果(由于图片不是很精致所以旁边有黑边):

     

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"> 
        <title></title>
        <style> 
        div{
            width: 242px;/* 单帧显示宽度 */
            height:182px;/* 单帧高度 */
            background: url(https://img-blog.csdn.net/20170222170027721);
            animation: mymove 0.5s steps(7) infinite; /* 7 就是帧数 */
            -webkit-animation: mymove 0.5s steps(7) infinite; /* 7 就是帧数 */
        }
        @keyframes mymove{
            0%  {background-position:     0px 0;}
            100%   {background-position:  -1684px 0;} /* 图片总宽度 */
        }
        @-webkit-keyframes mymove{
            0%  {background-position:     0px 0;}
            100%   {background-position:  -1684px 0;} /* 图片总宽度 */
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

    参考:

    https://www.cnblogs.com/Fengzp/p/5548493.html##commentform

    https://blog.csdn.net/chy555chy/article/details/56489497

    示例来源:https://www.html5tricks.com/demo/css3-sprite-zombie-walking/index.html

  • 相关阅读:
    C *p++ (*p)++ *p+=2 区别
    C 找到两字串中最长的相同串
    Jquery插件Jquerycolor
    C Fibonacci前N项和 阶乘的前N项和
    Baidu Google地图应用
    6.11Java多线程、并发、同步、synchronized方法
    6.10Java线程同步_synchronized
    6.18Java多线程并发、同步性能分析
    6.11Java多线程、并发、同步、synchronized块
    6.18Java多线程同步方法实现DemoNo2
  • 原文地址:https://www.cnblogs.com/mankii/p/14102530.html
Copyright © 2011-2022 走看看