css使用animation逐帧实现动画效果
程序员文章站
2022-03-16 16:21:21
...
css使用animation逐帧实现动画效果，如图所示：
由上图所示,它是一帧一帧无限循环实现的
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background:#000;
}
.bear{
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
background:url(../../assets/images/bear.png) no-repeat 0 0;
animation:move 1.5s steps(8,end) infinite ;
}
@keyframes move{
0%{
background-position:0 0;}
100%{
background-position:-1600px 0;}}
</style>
</head>
<body>
<div class="bear">
</div>
</body>
</html>
上一篇： Android 用Animation-list实现逐帧动画
下一篇： 隔断洗手间
推荐阅读