<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div-entirety{
width: 1200px;
height: 500px;
background: url("../img/1_1.jpg");
animation: backgroundMovie 7s linear infinite;
}
@keyframes backgroundMovie{
0%{
background-position: -1920px;
}
100%{
background-position:0 ;
}
}
.div-wu{
width:200px ;//宽高和图片的分辨率有关，如悟空的图片分辨率就是1600*180的，因为这个悟空有8个小图片所以长就是1600/8
height: 180px;
background: url("../img/wk.png") no-repeat;
position: absolute;//这里是就人物图片移动到他的位置上
top: 210px;
left: 270px;
animation: wuMovie 1s steps(8) infinite;//steps()指逐步运动
}
@keyframes wuMovie{
0%{
background-position:0 0;
}
100%{
background-position: -1600px 0;
}
}
.div-zhu{
width:200px ;
height: 180px;
background: url("../img/bj.png") no-repeat;
position: absolute;
top: 210px;
left: 440px;
animation: wuMovie 1s steps(8) infinite;
}
.div-tang{
width:170px ;
height: 240px;
background: url('../img/ts.png') no-repeat;
position: absolute;
top: 180px;
left:600px;
animation: tangMovie 1s steps(8) infinite;
}
@keyframes tangMovie{
0%{
background-position:0 0;
}
100%{
background-position: -1360px 0;
}
}
.div-sha{
width:210px ;
height: 200px;
background: url('../img/ss.png') no-repeat;
position: absolute;
top: 205px;
left:740px;
animation: ssdh 1s steps(8) infinite;
}
@keyframes ssdh{
0%{
background-position:0 0;
}
100%{
background-position: -1680px 0;
}
}
//最终效果
</style>
</head>
<body>
<div class="div-entirety">
<div class="div-wu"></div>
<div class="div-zhu"></div>
<div class="div-tang"></div>
<div class="div-sha"></div>
</div>
</body>
</html>