CSS3动画之实现大话西游师徒四人走动

该动画实现所需素材如下:

背景图

师徒四人

最终效果

这里主要使用的是动画animation-timing-function: steps(7, end);
将图片分成八份逐帧播放

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>大话西游</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.bg {height: 720px;width: 100%;background-image: url(./大话西游/background.jpg);background-position: right;background-repeat: repeat-x;float: left;position: relative;animation-name: bg;animation-duration: 15s;animation-timing-function: linear;animation-iteration-count: infinite;}.ts {height: 200px;width: 170px;float: left;position: absolute;top: 400px;left: 600px;background-image: url(./大话西游/ts.png);animation-name: ts;animation-duration: 1s;animation-timing-function: steps(7, end);animation-iteration-count: infinite;}.wk {height: 180px;width: 170px;float: left;position: absolute;top: 400px;left: 300px;background-image: url(./大话西游/wk.png);animation-name: wk;animation-duration: 1s;animation-timing-function: steps(7, end);animation-iteration-count: infinite;}.bj {height: 180px;width: 200px;float: left;position: absolute;top: 400px;left: 450px;background-image: url(./大话西游/bj.png);animation-name: bj;animation-duration: 1s;animation-timing-function: steps(7, end);animation-iteration-count: infinite;}.ss {height: 200px;width: 200px;float: left;position: absolute;top: 400px;left: 780px;background-image: url(./大话西游/ss.png);animation-name: ss;animation-duration: 1s;animation-timing-function: steps(7, end);animation-iteration-count: infinite;}@keyframes bg {0% {background-position: 0 0;}100% {background-position: 1900px 0;}}@keyframes ts {0% {background-position: 0 0;}100% {background-position: -1180px 0;}}@keyframes wk {0% {background-position: 0 0;}100% {background-position: -1400px 0;}}@keyframes bj {0% {background-position: 0 0;}100% {background-position: -1400px 0;}}@keyframes ss {0% {background-position: 0 0;}100% {background-position: -1450px 0;}}</style>
</head><body><div class="bg"></div><div class="ts"></div><div class="wk"></div><div class="bj"></div><div class="ss"></div></body></html>

CSS3动画之实现大话西游师徒四人走动相关推荐

用css制作西游记师徒四人小动画
师徒四人小动画看看效果我们的目标是让师徒四人做出走路的动作,并让背景从左往右移动. 让画面看起来是师徒四人向前走的效果. 前期准备我们先把背景,还有师徒四人走路的每一帧图片添加到工作区中并给背 ...
《西游记》中师徒四人的形象探究及现实意义
摘要: <西游记>是中国四大名著之一.可以说,它是中国古代神魔小说的巅峰.<西游记>包含了很多内容,它不仅限于描写恶魔或世俗事务,还涉及人.神.佛和恶魔.通过对相关文献的研究, ...
迟重瑞果然嫁给了爱情，陈丽华不惜花费重金，安排师徒四人聚会
在童话故事里面,曾经有富家公子为了取得女孩欢心,不惜一掷千金,只为博美人一笑的剧情. 其实在现实生活当中,也有类似这样的例子,只不过故事的主人翁有了反转,是女方为男方一掷千金. <西游记> ...
西游记中唐僧师徒四人的不同性格
西游记中唐僧师徒四人的不同性格我们知道西游记中如来佛祖在把孙悟空压到五行山下,安天大会结束后大约半千年,也就是孙悟空被压到五行山下快五百年之际,开了个盂兰盆会,决定将三藏真经传往东土大唐,观世音菩萨 ...
从唐僧师徒四人性格特点看团队结构的组成
单从文学的角度看,<西游记>是我国古代浪漫主义文学作品中的颠峰之作,但如果从管理学的角度看,你会发现这是关于一个团队为了一个宏伟的目标,克服种种艰难险阻而不懈努力的过程.对于企业管理中团队 ...
唐僧师徒四人你选谁做总经理
唐僧师徒四人你选谁做总经理考考你:如果你是老板,唐僧师徒四人你选谁做总经理? 这道题是几年前在中央3台<招才进宝>栏目,一个大型企业考高级管理人才的一道考题.记得当所有考生答毕后,考官将 ...
唐僧师徒四人，谁最适合编程？
唐僧师徒四人,谁最适合编程? 曾经技术部招人,要出一套C/C++考题.试题内容有: 1.选择题,有看程序,计算运行结果: 2.有C指针.内存分配的对错判断的问题: 3.有双链表的合并.删除的填空题: ...
唐僧师徒四人谁最适合做销售
文章分类:招聘求职唐僧立场坚定,从不动摇,销售的话,可能就是不肯让步,这样得不到顾客的认可.再说,明辨是非能力不强,销售是企业的第一线,不能明辨信息的话会使得公司遭受损失的可能性增大. 悟空义气 ...
《西游记》师徒四人给我们的职场启发
1大师兄 1.1出身奇特,拜师学艺大师兄是一块集天地之精华的石头变化而成的石猴.出身草根,因想产生不老,翻山越岭找了好师傅,学了一身的本事,具有七十二般变化. 1.2天庭招聘,闯下大祸在人间,占花 ...

CSS3动画之实现大话西游师徒四人走动

CSS3动画之实现大话西游师徒四人走动

该动画实现所需素材如下:

CSS3动画之实现大话西游师徒四人走动相关推荐

最新文章

热门文章