素材:
链接:
https://img1.baidu.com/it/u=3361754298,960828090&fm=253&fmt=auto&app=138&f=PNG?w=1472&h=325
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
background-image: url(https://img1.baidu.com/it/u=3361754298,960828090&fm=253&fmt=auto&app=138&f=PNG?w=1472&h=325);
height:325px;/*平均高度*/
width: 184px;/*平均宽度*/
margin: 0 auto;
animation-name: run;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: steps(8);
}
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1472px 0;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
主要运用animation-timing-function: steps(8)将图片分为8份,然后一份份播放。