H5Css3动画 背景图 制作帧动画

<span class="css-class" style="color: rgb(255, 0, 255);"><span class="before">
</span></span>

<span class="css-class" style="color: rgb(255, 0, 255);"><span class="before">.</span>running</span><span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">height<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">60<span class="after">px</span></span>;
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">width<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">90<span class="after">px</span></span>;
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">position<span class="after">:</span></span>absolute;
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">top<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">50<span class="after">%</span></span>;<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">left<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">70<span class="after">%</span></span>;
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background<span class="after">:</span></span>url(<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">http<span class="after">:</span></span><span class="comment comment-line" style="color: rgb(34, 34, 204);"><span class="before" style="color: rgb(187, 170, 170);">//</span>img.xiaoho.com/2014/12/test.png) no-repeat 0 0;</span>
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">visibility<span class="after">:</span></span>hidden;
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">-webkit-animation<span class="after">:</span></span>run 350ms steps(1) infinite 5s;
<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>

<span class="keyword css-at-rule" style="color: rgb(0, 0, 255);"><span class="before">@</span>-webkit-keyframes</span> run <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
<span class="css-length" style="color: rgb(0, 0, 255);">0<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">visibility<span class="after">:</span></span>visible;
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span>0;
<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
<span class="css-length" style="color: rgb(0, 0, 255);">20<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-90<span class="after">px</span></span> 0;
<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
<span class="css-length" style="color: rgb(0, 0, 255);">40<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-180<span class="after">px</span></span> 0;
<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
<span class="css-length" style="color: rgb(0, 0, 255);">60<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-270<span class="after">px</span></span> 0;
<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
<span class="css-length" style="color: rgb(0, 0, 255);">80<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-360<span class="after">px</span></span> 0;
<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
<span class="css-length" style="color: rgb(0, 0, 255);">100<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-450<span class="after">px</span></span> 0;
<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>

<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>

html代码：

<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>running<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>layout<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>bar<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>