steps animation

最新推荐文章于 2023-02-28 10:13:05 发布

weixin_30566111

最新推荐文章于 2023-02-28 10:13:05 发布

阅读量64

点赞数

原文链接：http://www.cnblogs.com/ws-zhangbo/p/5765361.html

版权

  1 <!DOCTYPE html>
  2     <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>css3逐帧动画</title>
  6         <style>
  7         @keyframes run{
  8             0%{
  9                 background-position: 0 0;
 10             }
 11             8.333%{
 12                 background-position: -140px 0;
 13             }
 14             16.666%{
 15                 background-position: -280px 0 ;
 16             }
 17             25.0%{
 18                 background-position: -420px 0 ;
 19             }
 20             33.333%{
 21                 background-position: -560px 0 ;
 22             }
 23             41.666%{
 24                 background-position: -700px 0 ;
 25             }
 26             50.0%{
 27                 background-position: -840px 0 ;
 28             }
 29             58.333%{
 30                 background-position: -980px 0 ;
 31             }
 32             66.666%{
 33                 background-position: -1120px 0 ;
 34             }
 35             75.0%{
 36                 background-position: -1260px 0 ;
 37             }
 38             83.333%{
 39                 background-position: -1400px 0 ;
 40             }
 41             91.666%{
 42                 background-position: -1540px 0 ;
 43             }
 44             100%{
 45                 background-position: 0 0 ;
 46             }
 47         }
 48         @-webkit-keyframes run{
 49             0%{
 50                 background-position: 0 0;
 51             }
 52             8.333%{
 53                 background-position: -140px 0;
 54             }
 55             16.666%{
 56                 background-position: -280px 0 ;
 57             }
 58             25.0%{
 59                 background-position: -420px 0 ;
 60             }
 61             33.333%{
 62                 background-position: -560px 0 ;
 63             }
 64             41.666%{
 65                 background-position: -700px 0 ;
 66             }
 67             50.0%{
 68                 background-position: -840px 0 ;
 69             }
 70             58.333%{
 71                 background-position: -980px 0 ;
 72             }
 73             66.666%{
 74                 background-position: -1120px 0 ;
 75             }
 76             75.0%{
 77                 background-position: -1260px 0 ;
 78             }
 79             83.333%{
 80                 background-position: -1400px 0 ;
 81             }
 82             91.666%{
 83                 background-position: -1540px 0 ;
 84             }
 85             100%{
 86                 background-position: 0 0 ;
 87             }
 88         }
 89         div{
 90             width:140px;
 91             height:140px;
 92             background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
 93             animation:run 1s steps(1, start) infinite;
 94                 -webkit-animation:run 1s steps(1, start) infinite;
 95         }
 96         </style>
 97     </head>
 98     <body>
 99         <div></div>
100     </body>