核心思路:body加冰山背景图片,定义动画0到-1600px的移动,30s的动画时长,实现背景移动;div加小熊背景图片,定义动画0到-1600px的移动实现小熊奔跑,再定义动画小熊跑body的50%的x轴。
<style>
body {
background: url(media/bg1.png) no-repeat;
animation: bg 20s 2.9s linear;
}
@keyframes bg {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes go {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes stop {
0% {
left: 0;
}
100% {
position: absolute;
left: 50%;
margin-left: -100px;
}
}
div {
position: relative;
transform: translateY(237px);
width: 200px;
height: 100px;
background: url(media/bear.png) no-repeat;
animation: go 0.5s steps(8) infinite, stop 3s linear forwards;
}
</style>
</head>
<body>
<div></div>
</body>