此案例使用了 steps() 步长来显示熊的状态,常规的ease等动画速度,达不到我们需要的效果,因此steps()更契合,而两张背景使用linear来匀速运动来保证速度的一致。
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>奔跑的熊</title>
<style>
.bear {
position: absolute;
bottom: 15px;
width: 200px;
height: 100px;
background: url(media/bear.png) no-repeat;
/* 元素可以添加多个动画,用逗号分割即可 */
animation: bear 1s steps(8) infinite, move 3s linear forwards;
}
.bg2 {
position: absolute;
width: 100%;
height: 500px;
/* 注意这里不要写no-repeat 否则图片动画结束之后会有空白 */
background: url(media/bg2.png);
animation: bg-move 25s linear infinite;
}
.bg1 {
position: absolute;
bottom: 0;
width: 100%;
height: 336px;
/* 注意这里不要写no-repeat 否则图片动画结束之后会有空白 */
background: url(media/bg1.png);
animation: bg-move 25s linear infinite;
}
/* 让熊动起来 */
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
/* 熊跑到中间 */
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
/* margin-left: -100px; */
/* 往左移动自身宽度的一半 */
transform: translateX(-50%);
}
}
@keyframes bg-move {
0% {
background-position: 0 0;
}
100% {
background-position: -3840px 0;
}
}
</style>
</head>
<body>
<div class="bg2">
<div class="bg1">
<div class="bear"></div>
</div>
</div>
</body>
</html>
图片素材:
至于具体效果,感兴趣的朋友们可以去试一试,也可以在此基础上加入一些自己的小创意。