用animation做影片時發現背景圖片是直接平移運動到指定位置的，即具有連續性，而animation-timing-function：steps(num，start/end)屬性可以使背景圖片運動不連續，即實作逐幀影片，
steps(num，start/end) 第一個值num表示把影片分成了多少段；第二個值默認為end，較難理解此處不做深究，
以下實體中圖片大小為1260px*300px,共分7幀，故num值為7
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;} 8 .box{ 9 width: 200px; 10 height: 300px; 11 background: pink url(img/charector.png) ; 12 animation:name 1s steps(7) infinite; 13 } 14 @keyframes name{ 15 0%{ 16 background-position: 0 0; 17 } 18 100%{ 19 background-position: -1260px 0; 20 } 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box"></div> 26 </body> 27 </html>
原圖如下：
影片效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/62286.html
標籤：Html/Css
上一篇：移動Web開發必備基礎之媒體查詢
下一篇：移動端常用單位（%和rem）