通过CSS3的动画效果实现任务和背景的移动小案例
html：
\
CSS：
- {
padding: 0;
margin: 0;
list-style: none;
}
\
html,
body {
height: 100%;
}
\
.main {
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
\
.main ul {
width: 4000px;
height: 100%;
animation: xiyou 30s linear infinite;
position: absolute;
top: 0;
left: 0;
}
\
.main ul li {
background-image: url(img/1.jpg);
width: 100%;
height: 100%;
float: left;
margin-left: -2000px;
}
\
@keyframes xiyou {
from {
left: 0;
}
\
to {
left: 2000px;
}
}
\
.wk {
position: absolute;
top: 55%;
left: 30%;
z-index: 999;
width: 200px;
height: 200px;
background: url(img/west_01_3ca39fe.png) 0 0 no-repeat;
animation: wkzou 1s steps(8) infinite;
}
\
@keyframes wkzou {
to {
background-position: -1600px 0;
}
}
\
.bj {
position: absolute;
top: 55%;
left: 50%;
z-index: 999;
width: 200px;
height: 200px;
background: url(img/west_02_47bad19.png) 0 0 no-repeat;
animation: wkzou 1s steps(8) infinite;
}
\
实现效果：
