使用css animation实现小人跑动效果
2021-03-28 本文已影响0人
miao8862
前了阵子学习了一些animation的动效使用方法，一方面是想练习，一方面也是好奇那些动画怎么制作出来的，于是乎，我就动手实现一个小人动画跑动的特效。
-
要使用到的雪碧图素材是这样的：
littleManMove.png
-
效果图是这样的：
1616491923960.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>animation实现动态小人跑步动作（使用雪碧图和animation结合）</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
background:url('./littleManMove.png') no-repeat;
height: 50px;
width: 88.83px;
/* 直接将一个有所有动作的图（这里是从左到右的动作图），有几个阶段就分为几个步骤number，默认从steps(n,end)开头开始 */
animation: move .3s steps(6) infinite;
}
@keyframes move {
0% {
background-position: 0px 0;
}
100% {
background-position: -533px 0;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
