效果图：
源代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #ddd;}span {display: block;height: 100px;width: 300px;text-align: center;line-height: 100px;font-size: 48px;margin: 150px auto;border-bottom: 1px solid #00a4ff;}.bg1 {position: absolute;bottom: 0px;height: 300px;width: 100%;background: url(image/bg1.png) repeat-x;animation: change_bg 5s linear infinite;}.bg2 {position: absolute;bottom: 0px;height: 300px;width: 100%;z-index: 1;background: url(image/bg2.png) repeat-x;animation: change_bg 5s linear infinite;}.img {position: fixed;bottom: 10px;height: 100px;width: 200px;z-index: 2;background: url(image/bear.png);animation: bear .4s steps(8) infinite, change_pos 2s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes change_pos {0% {left: 0;}100% {left: 50%;transform: translate(-50%, 0);}}@keyframes change_bg {0% {background-position: 0 0;}100% {background-position: -3840px 0;}}</style></head><body><span>奔跑的北极熊</span><div class="bg1"></div><div class="bg2"></div><div class="img"></div></body></html>
所用资源图：
bg1:
bg2:
bear：
