css3逐帧动画

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>css3逐帧动画</title>      <style>      @keyframes run{          0%{              background-position: 0 0;           }           8.333%{               background-position: -140px 0;           }           16.666%{               background-position: -280px 0 ;           }           25.0%{               background-position: -420px 0 ;           }           33.333%{               background-position: -560px 0 ;           }           41.666%{               background-position: -700px 0 ;           }           50.0%{               background-position: -840px 0 ;           }           58.333%{               background-position: -980px 0 ;           }           66.666%{               background-position: -1120px 0 ;           }           75.0%{               background-position: -1260px 0 ;           }           83.333%{               background-position: -1400px 0 ;           }           91.666%{               background-position: -1540px 0 ;           }           100%{               background-position: 0 0 ;           }       }             div{           width:140px;           height:140px;           background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;           animation:run 1s steps(1, start) infinite;       }       </style>   </head>   <body>       <div></div>    </body>
    posted @   前端搬运工bug  阅读(55)  评论(0编辑  收藏  举报
    相关博文:
    阅读排行:
    · 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
    · 使用C#创建一个MCP客户端
    · ollama系列1:轻松3步本地部署deepseek,普通电脑可用
    · 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
    · 按钮权限的设计及实现
    点击右上角即可分享
    微信分享提示