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

2024-02-06 16:41| 来源: 网络整理| 查看: 265

师徒四人小动画看看效果

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

前期准备

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

并给背景和师徒四人对应设置div。 bg-背景 one-唐僧 two-悟空 three-八戒 four-沙僧

设置背景

给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; }

这样动画就完成啦！在这里插入图片描述快去试试吧~~

【本文地址】

公司简介

联系我们