animation动画：奔跑的北极熊
-
实现代码 html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="animation_div">
<div class="bear"></div>
<div class="snowbery"></div>
<div class="mountain"></div>
</div>
</body>
</html>
css部分
* {
margin: 0;
padding: 0;
}
body {
background-color: #CCC;
}
.animation_div {
position: fixed;
bottom: 0;
width: 100%;
}
@keyframes bear {
0% {
}
100% {
background-position: -1600px 0;
}
}
@keyframes move_center {
0% {
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
.bear {
position: absolute;
bottom: 0;
z-index: 3;
left: 0;
margin-bottom: 15px;
height: 100px;
width: 200px;
background: url(../imgs/bear.png) no-repeat;
animation: bear .8s steps(8) 0s infinite, move_center 4s ease-out 0s forwards;
}
@keyframes snowbery {
0% {
}
100% {
background-position: -3840px 0;
}
}
.snowbery {
position: absolute;
bottom: 0;
z-index: 2;
width: 100%;
height: 336px;
background: url(../imgs/snowbery.png) repeat-x;
animation: snowbery 10s linear 0s infinite;
}
@keyframes mountain {
0% {
}
100% {
background-position: -3840px 0;
}
}
.mountain {
position: absolute;
bottom: 0;
z-index: 1;
width: 100%;
height: 569px;
background: url(../imgs/mountain.png) repeat-x;
animation: mountain 10s linear 0s infinite;
}
