monkey.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大圣取经</title>
<link rel="stylesheet" type="text/css" href="../css/monkeyStyle.css"/>
</head>
<body>
<div class="bg_box">
<ul class="box">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
monkeyStyle.css
*{
padding: 0px;
margin: 0px;
}
li{
list-style: none;
}
.bg_box{
width:100%;
height: 100%;
background: red;
position: fixed;
background: url(../img/bg.jpg);
background-size: 100% 100%;
animation: bgmove 300s linear infinite ;
}
.box{
width: 900px;
height: 300px;
/* border: solid aqua 2px; */
display: flex;
justify-content: space-between;
position: absolute;
left: 0px;
right: 0px;
margin: auto;
top: 500px;
}
.box li{
width: 185px;
height: 250px;
/* border: #FF0000 solid 2px; */
text-align: center;
line-height: 250px;
/* display: inline-block; */
}
.box li:nth-child(1){
background: url(../img/1.png);
background-repeat: no-repeat;
animation: one 1s infinite step-end ;
}
.box li:nth-child(2){
background: url(../img/3.png);
background-repeat: no-repeat;
animation: two 1s infinite step-end ;
}
.box li:nth-child(3){
background: url(../img/2.png);
background-repeat: no-repeat;
animation: one 1s infinite step-end ;
}
.box li:nth-child(4){
background: url(../img/4.png);
background-repeat: no-repeat;
animation: three 1s infinite step-end ;
}
@keyframes bgmove{
0%{
background-position: left top;
}
100%{
background-position: 15000px top;
}
}
@keyframes one{
0%{
background-position: left top;
}
12.5%{
background-position: -200px top;
}
25%{
background-position: -400px top;
}
37.5%{
background-position: -600px top;
}
50%{
background-position: -800px top;
}
62.5%{
background-position: -1000px top;
}
75%{
background-position: -1200px top;
}
87.5%{
background-position: -1400px top;
}
100%{
background-position: -1600px top;
}
}
@keyframes two{
0%{
background-position: left top;
}
12.5%{
background-position: -170px top;
}
25%{
background-position: -340px top;
}
37.5%{
background-position: -510px top;
}
50%{
background-position: -680px top;
}
62.5%{
background-position: -850px top;
}
75%{
background-position: -1020px top;
}
87.5%{
background-position: -1190px top;
}
100%{
background-position: -1360px top;
}
}
@keyframes three{
0%{
background-position: left top;
}
12.5%{
background-position: -210px top;
}
25%{
background-position: -420px top;
}
37.5%{
background-position: -630px top;
}
50%{
background-position: -840px top;
}
62.5%{
background-position: -1050px top;
}
75%{
background-position: -1260px top;
}
87.5%{
background-position: -1470px top;
}
100%{
background-position: -1680px top;
}
}
在这里插入图片描述