gif动态图片转精灵图

最近接到需求，需要把拿到的gif动画转为精灵图，这里选择了一款 工具 ImageMagick ，下载地址：http://www.imagemagick.org/script/download.php

 

下载完成后，点击安装就可以了，然后在图片文件夹下，点开命令行工具,执行以下命令 将gif转为png：

 

$ magick btn.gif -coalesce +append btn.png

成功后再文件夹下会生成一张png精灵图，记录了每帧的一个动画状态

 

然后在css中使用背景图，定义一个动画，设置背景图的位置，例：

 

        &:after{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 60px;
            height: 60px;    
            border-radius: 50%;
            background:url("btn.png") center no-repeat;
            background-size: 60*图层数量  60px;
            -webkit-animation: show 2s steps(图层数量-1) infinite;
            animation: show 2s steps(图层数量-1) infinite;
            @keyframes show {
                0% {
                    background-position: 0% 0%;
                }
                100% {
                    background-position: -（60*图层数量-60） 0%;
                }
            }
            @-webkit-keyframes show {
                0% {
                    background-position: 0% 0%;
                }
                100% {
                    background-position: -（60*图层数量-60） 0%;
                }
            }
        }