本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
用animation做动画时发现背景图片是直接平移运动到指定位置的，即具有连续性，而animation-timing-function：steps(num，start/end)属性可以使背景图片运动不连续，即实现逐帧动画。 steps(num，start/end) 第一个值num表示把动画分成了多少段；第二个值默认为end，较难理解此处不做深究。 以下实例中图片大小为1260px*300px,共分7帧，故num值为7
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{
width: 200px;
height: 300px;
background: pink url(img/charector.png) ;
animation:name 1s steps(7) infinite;
}
@keyframes name{
0%{
background-position: 0 0;
}
100%{
background-position: -1260px 0;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画效果如下：
| 
发表于 2020-3-17 20:22:44
