一篇文带你使用CSS3做出西游记动画

小杨今天改BUG了么

已于 2022-03-07 17:46:44 修改

阅读量1k

点赞数

分类专栏：疯狂三剑客文章标签： html css3

于 2019-12-22 09:04:14 首次发布

本文链接：https://blog.csdn.net/qq_45731083/article/details/103626338

版权

疯狂三剑客专栏收录该内容

26 篇文章 0 订阅

订阅专栏

“白龙马蹄朝西，驮着唐三藏跟着仨徒弟…”。前段时间学了css3的动画，那么我就跟风做一个唐僧四徒取经，也就那回事吧

西游记

这个页面主要用到了css3的动画制作，background-position的使用与steps属性，好了废话不多说，先来看一下效果吧
在这里插入图片描述
有兴趣的话可以试一下，具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>西游记</title>
		<style>
			body{
				width:100%;
				height:100%;
				margin:0;
				padding:270px 0;
				background-image: url(img/01.webp);
				background-repeat: repeat-x;//水平铺展开
				position:relative;
				animation: bg 10000s linear infinite;//动画bg隔10000s执行一次，
				//并且是无限循环下去
			}
			@keyframes bg{
				from{background-position: -999999px;}//图片定位从-999999px到0px
				to{background-position: 0;}
			}
			#bg{
				position:absolute;
				left:50%;
				top:50%;
				margin-left: -500px;
				text-align: center;
			}
			#bg div{
				width:180px;
				height:190px;
				margin: 0 20px;
				display: inline-block;
			}
			#swk{
				background-image: url(img/01.png);
				//动画1.4s执行一次，并且把动画分成八段主要是因为这个图片中有八个动作，
				//所以我们在这里把图片分成把部分
				animation:swk 1.4s steps(8) infinite;
			}
			@keyframes swk{
				from{background-position: 0;}
				to{background-position: -1600px;}
			}
			#zbj{
				background-image: url(img/02.png);
				animation:swk 1.4s steps(8) infinite;
			}
			#ts{
				background-image: url(img/03.png);
				animation:ts 1.4s steps(8) infinite ;
			}
			@keyframes ts{
				from{background-position: 0;}
				to{background-position: -1360px;}
			}
			
			#shs{
				background-image: url(img/04.png);
				animation:shs 1.4s steps(8) infinite ;
			}
			@keyframes shs{
				from{background-position: 0;}
				to{background-position: -1680px;}
			}
		</style>
	</head>
	<body>
	//设置一个div把situsiren师徒四人放在一起
		<div id="bg">
			<div id="swk"></div>
			<div id="zbj"></div>	
			<div id="ts" style="height:220px;"></div>
			<div id="shs"></div>
		</div>
	</body>
</html>