奔跑的熊大案例
作者：互联网
运行效果
运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sign in</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1995454_m8o91v5gnt.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1995454_gilj3seboe6.css">
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
background: url(./image/body.jfif) no-repeat;
background-size:cover;
overflow: hidden;
}
a{
text-decoration: none;
color: #ccc;
}
.bear{
position: absolute;
width: 200px;
height: 100px;
left: 0;
top: 880px;
background: url(./image/bear.png) no-repeat;
animation: bear 1s steps(8) infinite, move 2s forwards ;
z-index: 2;
}
.moutain{
position: absolute;
width: 100%;
height: 336px;
margin-top: 700px;
background: url(./image/bg1.png) ;
animation: moutain 2s steps(10) infinite backwards;
z-index: 1;
}
.moutain1{
position: absolute;
width: 100%;
height: 569px;
margin-top: 700px;
background: url(./image/bg2.png) ;
animation: moutain 2s steps(10) infinite backwards;
}
@keyframes bear{
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
@keyframes move{
0%{
left: 0;
}
100%{
left: 50%;
transform: translateX(-50%);
}
}
@keyframes moutain{
0%{
background-position: 0 0;
}
100%{
background-position: -3800px 0;
}
}
</style>
</head>
<body>
<div class="bear">
</div>
<div class="moutain"></div>
<div class="moutain1"></div>
</body>
</html>
标签：100%,moutain,奔跑,案例,bear,background,position,熊大,image 来源： https://blog.csdn.net/m0_53895172/article/details/115445895