关于css:奔跑的狗熊

46次阅读

共计 820 个字符，预计需要花费 3 分钟才能阅读完成。

<!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>