zoukankan      html  css  js  c++  java
  • 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%;
                    }
                }
            }
  • 相关阅读:
    深度优先搜索查找图中的所有连通分量
    广度优先搜索BFS-图
    深度优先搜索DFS-图
    稀疏向量算法
    zip函数
    函数(三)>>内置函数
    函数(二)
    面向对象1
    面向对象2
    函数(上)
  • 原文地址:https://www.cnblogs.com/styleFeng/p/14689407.html
Copyright © 2011-2022 走看看