[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图片下载:

相关推荐
不做超级小白17 分钟前
JavaScript反爬技术解析与应对
开发语言·javascript·ecmascript
engchina1 小时前
使用Express.js和SQLite3构建简单TODO应用的后端API
javascript·sqlite·express
轻口味2 小时前
Vue.js `v-memo` 性能优化技巧
前端·vue.js·性能优化
prince_zxill2 小时前
Array.prototype 方法在复杂数据处理中的应用
前端·javascript·原型模式
GISer_Jing2 小时前
React基础知识回顾详解
前端·react.js·前端框架
键.2 小时前
react-bn-面试
javascript·react.js·ecmascript
阿正的梦工坊2 小时前
深入解析 Chrome 浏览器的多进程架构:标签页是进程还是线程?(中英双语)
linux·服务器·前端·chrome·架构·unix
无限大.2 小时前
前端知识速记--CSS篇:display
前端·css
小松聊PHP进阶3 小时前
万字总结PHP与JavaScript、PHP与PHP 实现开箱即用的AES、RSA和较为安全的自定义加解密算法
前端·后端·php
滚雪球~3 小时前
el-button 中icon在文字前和在文字后的写法
前端