<!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>
@keyframes run { 0% { left: 0; } 100% { left: -1600px; }}@keyframes move { 0% { left: 0; } 100% { left: 50%; transform: translateX(-50%); }}@keyframes bg_move { 0% { background-position: 0; } 100% { background-position: -1840px; }}body { /* background-color: gray; */ background: url(./media/bg1.png) no-repeat center center ; animation: bg_move 10s infinite;}div { position: relative; width: 200px; height: 100px; margin: 300px 0; /* background-color: skyblue; */ overflow: hidden; animation: move 3s linear forwards;}img { position: absolute; top: 0; left: 0; width: 1600px; height: 100px; animation: run .7s steps(8) infinite;}</style>
</head>
<body>
<div>
<img src="./media/bear.png" alt=""></div>
</body>
</html>