小白第一次掘金上写文，如有问题，欢迎指出，共同进步，第一步第二步是我制作图片的过程，可能很无聊(凑字数)，直接看第三步css代码就好，先放下效果图：
1.视频处理：
在b站上刷视频的时候，看到了up主的一个阿尼亚的视频,很可爱，想做成一个gif,自己做的GIF但好像挺大的，放到网页上不好用，还有背景色，所以做一些处理捣鼓一下。
下载视频后，首先截取大小，只要我们想要的一小部分就好，然后视频基本是重复播放，这里我们截取时间长短为动画的一个循环，约为0.8s不到的视频。
2.图片处理:
0.8s不到的视频里我们需要截取每一帧需要的图片，这里用了一下最近刚学的ffmpeg命令（装B）
ffmpeg -ss 00:00:00.5 -i /Users/wwwwww/Desktop/2.mp4 -vframes 1 Aniya_4.png
比如这里就是获取将当地路径下2.mp4视频的0.5s截图，最好保存为png格式，png格式支持透明，jpg不支持，因为我想把会动的阿尼亚放到网页上，最好是透明底，白色背景不好放到任意处，以此类推，我们获得获取0.1s,0.2s,0.3s...一共八张需要的图片，如下：
此时我发现每张图片都太大了，高1080去了，足足有680多kB,我先将每张图片抠出阿尼亚，透明背景，因为都是纯色背景，还是很好抠图的（ps擅长者忽略），然后对图片进行等比例缩小，然后压缩，这里用到的网站是I❤️IMG,操作如下：
看你需要,其实每张图片调整大小能弄到每张很小很小,，不过我希望清晰一点呢，(像素风的Aniya好像也不错),然后合成一张sprites图，这里我用的这个CSS Sprites Generator网站,操作还是比较方便的。
3.css
获取到图片之后，大概长下面这个样子，我放入图床了，大概69kB(好像还是挺大的，可以再小点)，里面每张图片高100，宽75
思路很简单：一直循环动画不断修改图片的位置background-position就好,个人理解是在这里类似把图片从左到右移动,像放ppt一样,调整好setps就好，八张图变换7次，一次循环刚好八张图都能在正确的位置，调整循环时间影响播放速度，相关知识我就不科普了，自己还是小白不是很懂。
.Aniya {
animation: Aniya-walk-cycle 0.8s steps(7) infinite;
background: url("https://pic.imgdb.cn/item/63c6167bbe43e0d30e58fda3.png") 0 0 no-repeat;
height: 100px;
width: 75px;
}
@keyframes Aniya-walk-cycle {
0% {
background-position: -0 -0;
}
100% {
background-position: -525px -0;
}
}
没啥知识点😭😭，我就看个可爱Aniya.（点个赞👍吧，溜！！）
