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%;
                    }
                }
            }
  • 相关阅读:
    BZOJ1176: [Balkan2007]Mokia
    BZOJ1251: 序列终结者
    BZOJ1087: [SCOI2005]互不侵犯King
    Mike and gcd problem CodeForces
    Bank Hacking CodeForces
    Ilya And The Tree CodeForces
    欢迎使用CSDN-markdown编辑器
    Folding UVA
    Cake slicing UVA
    Headmaster's Headache UVA
  • 原文地址:https://www.cnblogs.com/styleFeng/p/14689407.html
Copyright © 2011-2022 走看看