在很多時(shí)候,我們需要一個(gè)很難(或不可能)只通過某些CSS屬性的過渡來實(shí)現(xiàn)的動(dòng)畫塞琼。比如一段卡通影片,或是一個(gè)復(fù)雜的進(jìn)度指示框。在這種場景下,基于圖片的逐幀動(dòng)畫才是完美的選擇，下面我們就來實(shí)現(xiàn)如下圖所示的指示條胰蝠，學(xué)習(xí)一下如何通過css實(shí)現(xiàn)逐幀動(dòng)畫。
先來看一下思路：
我們可以假設(shè)把動(dòng)畫中的所有幀全部拼合到一張png圖片上震蒋，然后用一個(gè)元素來容納這個(gè)加載提示(別忘了在里面寫一些文字,來確比兹可訪問性)
，并把它的寬高設(shè)置為單幀的尺寸查剖。
代碼如下：
Document
@keyframes loader {
to { background-position: -800px 0; }
}
.loader {
width: 100px; height: 100px;
text-indent: 999px; overflow: hidden; /* Hide text */
background: url(http://dabblet.com/img/loader.png) 0 0;
animation: loader 1s infinite steps(8);
}
Loading...
