师徒四人小动画
看看效果
我们的目标是让师徒四人做出走路的动作,并让背景从左往右移动。
让画面看起来是师徒四人向前走的效果。
前期准备
我们先把背景,还有师徒四人走路的每一帧图片添加到工作区中
并给背景和师徒四人对应设置div。
bg-背景
one-唐僧
two-悟空
three-八戒
four-沙僧
<div class="bg">
<div class=" one"></div>
<div class=" two"></div>
<div class=" three"></div>
<div class=" four"></div>
</div>
设置背景
给class为bg的div设置大小,添加背景图片,因为我们的人物是从右往左走,那背景就应该从左边向右边移动,那么我们应给背景定位在最左边,然后向右拉动做动画效果,就可以实现背景的移动。
.bg {
width: 100%;
height: 800px;
background-image: url(./image/background.jpg);
background-position: -1920px 0px;
}
给背景设置动画,让图片从左往右移动。
@keyframes beijing {
from {
background-position: -1920px 0px;
}
to {
background-position: 0px 0px;
}
}
这样背景就可以动啦。
设置人物
每个人都是一样的设置,所以就拿唐僧作为例子吧
- 先测量唐僧图片的大小,给唐僧的div设置对应的大小宽度,并将div定位到合适的位置
.one {
width: 135px;
height: 152px;
position: absolute;
top: 400px;
left: 300px;
background-image: url(./image/ts1.png);
background-repeat: no-repeat;
}
- 设置动画,将时间轴8等分,每一份放置一张动作,8张连贯起来就是走路的动作啦(控制好切换图片的时间哦)
@keyframes ts {
0% {
background-image: url(./image/ts1.png);
}
14.29% {
background-image: url(./image/ts2.png);
}
28.57% {
background-image: url(./image/ts3.png);
}
42.86% {
background-image: url(./image/ts4.png);
}
57.15% {
background-image: url(./image/ts5.png);
}
71.44% {
background-image: url(./image/ts6.png);
}
85.73% {
background-image: url(./image/ts7.png);
}
100% {
background-image: url(./image/ts8.png);
}
}
- 将唐僧的div绑定动画,设置动画时长,循环等
.one {
width: 135px;
height: 152px;
position: absolute;
top: 400px;
left: 300px;
background-image: url(./image/ts1.png);
background-repeat: no-repeat;
animation-name: ts;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
这样动画就完成啦!
快去试试吧~~