效果：人物跑步移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes run {
from{
background-position: 0 0 ;
}
to {
background-position: -1200px 0;
}
}
@keyframes move {
from{
transform: translateX(0);
}
to {
transform: translateX(1200px);
}
}
div{
/* margin: 0 auto; */
width: 100px;
height: 120px;
background: yellow;
background-image: url(./Snipaste_2024-04-02_09-57-01.png);
animation: run 0.5s steps(12) infinite, move 5s linear forwards;
}
div:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
