奔跑的狗熊

站长

2022年09月08日 16:22 · 阅读数 453

<!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> 奔跑的狗熊

转载自:https://segmentfault.com/a/1190000041964485