One: Requirements Description
Realize the animation effect of a villain running
Two: Realize ideas
1. Write a box, the width and height of the box are equally divided according to the width of the background image, put the picture into the box through background-image, and then add animation to make the villain run in the box
Animation implementation: move 1s steps(12) infinite, (indicates that the animation lasts for 1s, and is divided into 12 steps frame by frame, infinite loop)
2. Add another animation to make the box move through the background-position attribute
Animation implementation: run 2s linear forwards, (indicates that the animation lasts for 2s, at a constant speed, and stays at the end of the animation)
Three: code implementation
<!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>
.box{
width:140px;
height:140px;
/* border:1px solid pink; */
background-image: url(./bg.png);
animation:
move 1s steps(12) infinite,
run 2s linear forwards;
}
/* 人在盒子里跑 */
@keyframes move{
/* 若从0 开始的话这个from可以省去 */
/* from{
background-position: 0 0;
} */
to{
background-position: -1680px 0;
}
}
/* 盒子在X轴上有0跑到800px, */
@keyframes run{
/* 若从0 开始的话这个from可以省去 */
/* from{
transform: translateX(0);
} */
to{
transform: translateX(800px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>