原理
1.UI 提供精灵图/雪碧图（就是将序列帧排在一张图片上的图）
2.通过代码不断改变图片的位置，从而形成动画效果
代码实现
代码语言：javascript复制 <style>
.logo_gif {
width: 300px; // 单个动画帧尺寸
height: 300px;
cursor: pointer;
background-image: url(./sequence.png);
background-size: 100%;
background-position-y: 0;
animation: mouse-in 1.5s;
animation-timing-function:steps(26); // 动画帧数量
animation-iteration-count:infinite // 动画循环播放
}
@keyframes mouse-in{
from{
background-position-y: 0;
}
to{
background-position-y: -7800px; // 根据 元素大小*动画帧数量得出
}
}
</style>
</head>
<body>
<div class="logo_gif" ></div>
</body>注意点
animation-timing-function:steps();；里面的数字为动画帧数量也就是雪碧图里面的图片数量 background-position-y的值不能随便取，必须根据元素的大小乘以动画帧数量得出 如本例元素大小为300，虽然雪碧图的大小是 400 x 10400 我们不能写成
@keyframes mouse-in{
from{
background-position-y: 0;
}
to{
background-position-y: -10400px; // 错误
}
}而是 300 * 26 = 7800
代码语言：javascript复制 @keyframes mouse-in{
from{
background-position-y: 0;
}
to{
background-position-y: -7800px; // 正确
}
}如果是 200的元素 则 background-position-y的值为 200 * 26 = 5200
