zoukankan      html  css  js  c++  java
  • 小人行走的动画案例

      小人行走动画的案例:

      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <title></title>
          <style>
            *{
              margin:0;
              padding:0;
            }
            .div{
              200px;
              height:180px;
              position:absolute;
              top:100px;
              left:100px;
              background:url(01.png) no-repeat;                                        /* 背景图片自己找  */
              animation:name 1.8s steps(8) infinite;         /* steps(8)  意思是 播放速度 逐帧播放   在css animation中有介绍  */
            }
            @-webkit-keyframes name{
              from{background-position-x:0px;}
              to{background-position-x:-1600px;}
            }
          </style>
        </head>
        <body>
          <div class="div"></div>
        </body>
      </html>

      这是我找的图片   找类似这样的   此图是我在梦幻西游中找的 

      

  • 相关阅读:
    css3简易实现图标动画由小到大逐个显现
    下拉图标呼吸效果制作
    设置图片从页面四周渐入效果的锚点方法
    关于导航宽度高度自适应的小栗子
    Odd-e CSD Course Day 5
    Odd-e CSD Course Day 2
    Odd-e CSD Course Day 3
    Odd-e CSD Course Day 1
    Odd-e CSD Course Day 4
    [心得] SQL Server Partition(表分區) 資料分佈探討
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10703954.html
Copyright © 2011-2022 走看看