web前端大话西游行走动画效果

最新推荐文章于 2022-11-26 10:18:21 发布

OrdnAry

最新推荐文章于 2022-11-26 10:18:21 发布

阅读量298

点赞数 1

分类专栏：学习文章标签： css

本文链接：https://blog.csdn.net/OrdnAry/article/details/107431600

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>大话西游动画效果</title>
 <style>
img{position:relative;}
/*********************悟空*************************/
div.d1{
		width:200px;/*可视化窗口宽*/
		height:180px;/*可视化窗口高*/
		overflow:hidden;/*溢出隐藏*/
		position:absolute;
		left:10%;
		top:40%;
		}
div.d1>img{	
	animation:d1dh 1s steps(7) infinite;/*调用动画*/
}
/*定义动画*/
@keyframes d1dh{
		from {transform:translateX(0px);}
		to{transform:translateX(-1400px);}
}
/*********************八戒*************************/
div.d2{
		width:200px;/*可视化窗口宽*/
		height:180px;/*可视化窗口高*/
		overflow:hidden;/*溢出隐藏*/
		position:absolute;
		left:30%;
		top:40%;
		}
div.d2>img{	
	animation:d2dh 1s steps(7) infinite;/*调用动画*/
}
/*定义动画*/
@keyframes d2dh{
		0% {transform:translateX(0px);}
		100%{transform:translateX(-1400px);}
}
/*********************唐僧*************************/
div.d3{
		width:170px;/*可视化窗口宽*/
		height:240px;/*可视化窗口高*/
		overflow:hidden;/*溢出隐藏*/
		position:absolute;
		left:50%;
		top:35%;
		}
div.d3>img{	
	animation:d3dh 1s steps(7) infinite;/*调用动画*/
}
/*定义动画*/
@keyframes d3dh{
		0% {transform:translateX(0px);}
		100%{transform:translateX(-1190px);}
}
/*********************沙僧*************************/
div.d4{
		width:210px;/*可视化窗口宽*/
		height:200px;/*可视化窗口高*/
		overflow:hidden;/*溢出隐藏*/
		position:absolute;
		left:70%;
		top:40%;
		}
div.d4>img{	
	animation:d4dh 1s steps(7) infinite;/*调用动画*/
}
/*定义动画*/
@keyframes d4dh{
		0% {transform:translateX(0px);}
		100%{transform:translateX(-1470px);}
}
 </style>
 </head>
 <body>
 <img src="img/bac.webp">
  <div class="d1">    
	<img src="img/west_01.png">
  </div>
  <div class="d2">    
	<img src="img/west_02.png">
  </div>
  <div class="d3">    
	<img src="img/west_03.png">
  </div>
  <div class="d4">    
	<img src="img/west_04.png">
  </div>
 </body>
</html>