likes
comments
collection
share

奔跑的狗熊

作者站长头像
站长
· 阅读数 291

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