利用CSS制作一个梦幻西游小动画

如何利用CSS制作一个梦幻西游小动画

代码如下

/* 背景图的动画 */
@keyframes back_move {
from {
margin-left: -1920px;
}
to {
margin-left: 0;
}
}

/* 容器样式 */
.wrap {
height: 300px;
width: 900px;
position: absolute;
top: 45%;
left: 50%;
margin-left: -450px;
}

.wrap > div {
float: left;
}

/* 孙悟空的窗口 /
.wk {
width: 200px;
height: 180px;
overflow: hidden;
}
/ 孙悟空的背景图 /
.wk div {
background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_01_3ca39fe.png);
height: 180px;
width: 1600px;
animation: wk_move 1s infinite steps(8);
}
@keyframes wk_move {
from {
margin-left: 0;
}
to {
margin