html5+css 西游动画

最新推荐文章于 2024-07-29 14:14:21 发布

Ricardo•M•Lu

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量3k

点赞数 2

本文链接：https://blog.csdn.net/weixin_43500988/article/details/89300629

版权

效果图
过程中使用到的图片

css3动画:
	会动的画 从什么状态到什么状态的过程
	需要动画序列规定这个动画->@keyframes
	from起始位置
	to结束位置
	
/*动画序列 自定义名称*/
@keyframes swk{
			from{
				background-position-x:0px;
			}
			to{
				background-position-x:-1600px;
			}
		}


/*绑定动画序列:名称 时间 脚步 循环*/
animation: swk 1.4s steps(8) infinite;

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>梦幻西游</title>
	<style>
		body{
			/*清除默认边距 */
			margin: 0px;
			background-image: url(./images/bac.webp);
		}
		.footer{
			width: 760px;
			height: 240px;
			margin: 350px auto 0 auto;
		}
		.west{
			float: left;
			width: 190px;
			height: 240px;
			/*背景不重复*/
			background-repeat: no-repeat;
		}
		.west:nth-of-type(1){
			background-image: url(./images/west_01.png);
			animation: swk 1.4s steps(8) infinite;	
		}
		.west:nth-of-type(2){
			background-image: url(./images/west_02.png);
			animation: zbj 1.4s steps(8) infinite;
		}
		.west:nth-of-type(3){
			margin: -30px;
			background-image: url(./images/west_03.png);
			animation: ts 1.4s steps(8) infinite;

		}
		.west:nth-of-type(4){
			background-image: url(./images/west_04.png);
			animation: ss 1.4s steps(8) infinite;
		}
		@keyframes swk{
			from{
				background-position-x:0px;
			}
			to{
				background-position-x:-1600px;
			}
		}
		@keyframes zbj{
			from{
				background-position-x:0px;
			}
			to{
				background-position-x:-1600px;
			}
		}
		@keyframes ts{
			from{
				background-position-x:0px;
			}
			to{
				background-position-x:-1360px;
			}
		}
		@keyframes ss{
			from{
				background-position-x:0px;
			}
			to{
				background-position-x:-1680px;
			}
		}
		
	</style>
</head>
<body>
	<div class="footer">
		<div class="west"></div>
		<div class="west"></div>
		<div class="west"></div>
		<div class="west"></div>
	</div>
</body>
</html>