师徒四人小动画

看看效果

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

前期准备

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

并给背景和师徒四人对应设置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;}

这样动画就完成啦！

快去试试吧~~

用css制作西游记师徒四人小动画相关推荐

Linux：文件权限管理小案例2：西游记师徒四人叛变记
第一步,第二步,第三步如下: 创建组,新建用户,修改密码命令指令分别是groupadd xx useradd xx passwd,不再赘述. 第四步:wk,bj放入yg. ts,ss放入sx,操作如下 ...
《西游记》中师徒四人的形象探究及现实意义
摘要: <西游记>是中国四大名著之一.可以说,它是中国古代神魔小说的巅峰.<西游记>包含了很多内容,它不仅限于描写恶魔或世俗事务,还涉及人.神.佛和恶魔.通过对相关文献的研究, ...
西游记中唐僧师徒四人的不同性格
西游记中唐僧师徒四人的不同性格我们知道西游记中如来佛祖在把孙悟空压到五行山下,安天大会结束后大约半千年,也就是孙悟空被压到五行山下快五百年之际,开了个盂兰盆会,决定将三藏真经传往东土大唐,观世音菩萨 ...
迟重瑞果然嫁给了爱情，陈丽华不惜花费重金，安排师徒四人聚会
在童话故事里面,曾经有富家公子为了取得女孩欢心,不惜一掷千金,只为博美人一笑的剧情. 其实在现实生活当中,也有类似这样的例子,只不过故事的主人翁有了反转,是女方为男方一掷千金. <西游记> ...
从唐僧师徒四人性格特点看团队结构的组成
单从文学的角度看,<西游记>是我国古代浪漫主义文学作品中的颠峰之作,但如果从管理学的角度看,你会发现这是关于一个团队为了一个宏伟的目标,克服种种艰难险阻而不懈努力的过程.对于企业管理中团队 ...
唐僧师徒四人你选谁做总经理
唐僧师徒四人你选谁做总经理考考你:如果你是老板,唐僧师徒四人你选谁做总经理? 这道题是几年前在中央3台<招才进宝>栏目,一个大型企业考高级管理人才的一道考题.记得当所有考生答毕后,考官将 ...
唐僧师徒四人，谁最适合编程？
唐僧师徒四人,谁最适合编程? 曾经技术部招人,要出一套C/C++考题.试题内容有: 1.选择题,有看程序,计算运行结果: 2.有C指针.内存分配的对错判断的问题: 3.有双链表的合并.删除的填空题: ...
CSS3动画之实现大话西游师徒四人走动
CSS3动画之实现大话西游师徒四人走动该动画实现所需素材如下: 背景图师徒四人最终效果这里主要使用的是动画animation-timing-function: steps(7, end); ...
记录html+css制作一个上下跳动效果的动画
需求想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...

用css制作西游记师徒四人小动画