HTML+CSS梦幻西游动画

HTML代码

一个大盒子中装了四个小盒子，每个小盒子中一张png图片 

CSS代码

格式设置：

        将每个大div盒子的大小设置完成后，每个小的div盒子宽度占大的div盒子的25%，高度与大盒子一致。

动画实现：

        在CSS3中动画的实现只需设置关键帧即可，因此在此动画中我们只编写0%和100%即可，在0%时使图片至于最开始，100%时使图片置于最左侧，每张png图片中都有动作不同动作的人物，因此我们动画分八步执行，时间持续1.4s，无限循环即可。

@charset "utf-8";
/* CSS Document */
body
{
	margin:0;
	background:url(images/bac.webp) no-repeat;/*设置背景图片*/
}
.box
{
	width:710px;
	height:300px;
	margin:300px auto;/*使盒子居中*/
}
.role
{
	width:25%;
	height:300px;
	float:left;
}
.role1
{
	background:url(images/west_01.png) no-repeat;
	background-position-y:center;
	/*动画名称 持续时间 分为几步 无限循环执行*/
	animation:swk 1.4s steps(8) infinite;
}
@keyframes swk{
	0%{
		background-position-x:0%;/*开始时图片的位置*/
	}
	100%
	{
		background-position-x:-1600px;/*结束时的图片位置*/
	}
}
.role2
{
	background:url(images/west_02.png) no-repeat;
	background-position-y:center;
	animation:zbj 1.4s steps(8) infinite;
}
@keyframes zbj{
	0%{
		background-position-x:0%;
	}
	100%
	{
		background-position-x:-1600px;
	}
}
.role3
{
	background:url(images/west_03.png) no-repeat;
	background-position-y:center;
	animation:ts 1.4s steps(8) infinite;
}
@keyframes ts{
	0%{
		background-position-x:0%;
	}
	100%
	{
		background-position-x:-1360px;
	}
}
.role4
{
	background:url(images/west_04.png) no-repeat;
	background-position-y:center;
	animation:ss 1.4s steps(8) infinite;
}
@keyframes ss{
	0%{
		background-position-x:0%;
	}
	100%
	{
		background-position-x:-1680px;
	}
}

代码及素材：

链接：https://pan.baidu.com/s/1Ekb0BMcm_uX3BlXdwvDa2A?pwd=pvx1 
提取码：pvx1