用css制作西游记师徒四人小动画_前端动画 一起走路

师徒四人小动画

看看效果

我们的目标是让师徒四人做出走路的动作，并让背景从左往右移动。
让画面看起来是师徒四人向前走的效果。

前期准备

我们先把背景，还有师徒四人走路的每一帧图片添加到工作区中

并给背景和师徒四人对应设置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>
1
2
3
4
5
6

设置背景

给class为bg的div设置大小，添加背景图片,因为我们的人物是从右往左走，那背景就应该从左边向右边移动，那么我们应给背景定位在最左边，然后向右拉动做动画效果，就可以实现背景的移动。

	.bg {
           width: 100%;
           height: 800px;
           background-image: url(./image/background.jpg);
           background-position: -1920px 0px;
     	  }
1
2
3
4
5
6

给背景设置动画,让图片从左往右移动。

@keyframes beijing {
           from {
               background-position: -1920px 0px;
           }

           to {
               background-position: 0px 0px;
           }
       }
1
2
3
4
5
6
7
8
9

这样背景就可以动啦。

设置人物

每个人都是一样的设置，所以就拿唐僧作为例子吧

1. 先测量唐僧图片的大小，给唐僧的div设置对应的大小宽度，并将div定位到合适的位置

	.one {
            width: 135px;
            height: 152px;
            position: absolute;
            top: 400px;
            left: 300px;
            background-image: url(./image/ts1.png);
            background-repeat: no-repeat;
        }

1
2
3
4
5
6
7
8
9
10

2. 设置动画，将时间轴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);
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3. 将唐僧的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;
       }
1
2
3
4
5
6
7
8
9
10
11
12

这样动画就完成啦！

快去试试吧~~