[Html5基础训练]animation的step使用方法

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sprite Demo</title>
    <style>
      #an {
        width: 128px;
        height: 128px;
        background: url(img/spriteB.png);        
        animation: move infinite 4s steps(8,end);
      }
      /* -254,-384  x-1152  1024-128=    896 */
      @keyframes move {
        0% {
          background-position:0 -256px;
        }
        50% {
          background-position:-1024px -256px;
        } 
        50.001% {
          background-position:0 -384px;
        }
        100% {
          background-position:-1024px -384px;
        }        
        
      }
    </style>
  </head>
  <body>
    <div id="an"></div>
  </body>
</html>

SpriteB图片下载:

相关推荐
Deepsleep.17 分钟前
react和vue的区别之一
javascript·vue.js·react.js
WEI_Gaot17 分钟前
react19 的项目创建和组件使用
前端·react.js
资深前端外卖员21 分钟前
【nodejs高可用】前端APM应用监控方案 + 落地
前端·后端
OhBonsai21 分钟前
Shader 图像处理1_ToneMap技术处理过曝
前端
突头小恐龙21 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子21 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125023 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
花生了什么树lll23 分钟前
面试中被问到过的前端八股(四)
前端·面试
zqlcoding24 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
海底火旺24 分钟前
破解二维矩阵搜索难题:从暴力到最优的算法之旅
javascript·算法·面试