background-position和animation制作逐帧动画
Posted web-learning
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了background-position和animation制作逐帧动画相关的知识,希望对你有一定的参考价值。
利用background-position和animation制作逐帧动画,成品如下:
html里面只要写一个元素就够了,动画我们把图片添加成背景做,再让背景在元素内移动。我用了一个整合图片,7个片段
*{margin:0;padding:0;}
section{
width: 180px;
height: 300px;
background: url(images/charector.png) no-repeat;
margin: 50px auto;
border: 2px solid red;
animation:run 1s infinite step-start;
}
加关键帧。因为有7个片段,我添加了八个状态。注意,100%状态那里不能在84%的基础上再递增。因为那样就不能做成循环奔跑的效果了,你得让它在100%的时候的状态跟0%时候一样,这样才首尾算接上了。最后在前面的样式那里加上animation
@keyframes run{
0%{background-position: 0 0;}
14%{background-position: -180px 0;}
28%{background-position: -360px 0;}
42%{background-position: -540px 0;}
56%{background-position: -720px 0;}
70%{background-position: -900px 0;}
84%{background-position: -1080px 0;}
100%{background-position: 0 0;}
}
以上是关于background-position和animation制作逐帧动画的主要内容,如果未能解决你的问题,请参考以下文章