#我的西游四人行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大话西游</title>
<style>
body{
/*外边距*/
margin: 0px;
background-image: url("images/background.jpg")
}
.west{
/*高度*/
width:760px;
/*宽度*/
height:180px;
/*上下左左右边距自动相等*/
margin: 300px auto;
/*颜色*/
}
.role{
/*从左到右，横排显示*/
float: left;
width: 190px;
height: 240px;
background-repeat:no-repeat;
background-position-y: center;
}
/*选择到第几个class标签叫做west的子元素*/
.role:nth-child(1){
background-image: url('images/wk.png');
animation: wk 1.4s steps(8) infinite;
}
.role:nth-child(2){
background-image: url('images/bj.png');
animation: bj 1.4s steps(8) infinite;
}
.role:nth-child(3){
background-image: url('images/ts.png');
animation: ts 1.4s steps(8) infinite;
}
.role:nth-child(4){
background-image: url('images/ss.png');
animation: ss 1.4s steps(8) infinite;
}
@keyframes wk{
0%{
background-position-x: 0px;
}
100%{
background-position-x: -1600px;
}
}
@keyframes bj{
0%{
background-position-x: 0px;
}
100%{
background-position-x: -1600px;
}
}
@keyframes ts{
0%{
background-position-x: 0px;
}
100%{
background-position-x: -1360px;
}
}
@keyframes ss{
0%{
background-position-x: 0px;
}
100%{
background-position-x: -1680px;
}
}
</style>
</head>
<body>
<div class="west">
<div class="role"></div>
<div class="role"></div>
<div class="role"></div>
<div class="role"></div>
</div>
</body>
</html>
```？
