HTML+CSS梦幻西游动画

最新推荐文章于 2023-03-01 18:57:38 发布

༺❀ൢ挽筝❀ൢ༻

最新推荐文章于 2023-03-01 18:57:38 发布

阅读量238

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_51625706/article/details/128537897

版权

HTML代码

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>梦幻西游动画</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="box">
	<div class="role role1"></div>
    <div class="role role2"></div>
    <div class="role role3"></div>
    <div class="role role4"></div>
</div>
</body>
</html>

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