文章 - 关于 css 生成gif图片 | 前端网（QDFuns）

1.做这个是逛b站时发现鼠标移入视频下面的金币时金币跳动（效果自行去b站看吧）

就F12 看了看发现挺有意思的

就准备自己写一个：

首先想到的是用css3 animation 实现

那就开始写吧

html 代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="">
        .one{
            height:80px;
            width:80px;
            background-image: url(//cdn.attach.qdfuns.com/notes/pics/201711/24/093550rypvkf59nt53nbb9.png);
            background-position: 0px 0px;
        }

.one.animate{
            animation:myfirst .8s linear infinite;
            -moz-animation:myfirst .8s linear infinite; /* Firefox */
            -webkit-animation:myfirst .8s linear infinite; /* Safari and Chrome */
            -o-animation:myfirst .8s linear infinite; /* Opera */
        }

@keyframes myfirst
        {
            0% {background-position: 0 0;}
            12.5% {background-position: -80px 0;}
            25% {background-position: -160px 0;}
            37.5% {background-position: -240px 0;}
            50% {background-position: -320px 0;}
            62.5% {background-position: -400px 0;}
            75% {background-position: -480px 0;}
            87.5% {background-position: -560px 0;}
            100%{background-position: -640px 0;}
        }

@-moz-keyframes myfirst /* Firefox */
        {
            0% {background-position: 0 0;}
            12.5% {background-position: -80px 0;}
            25% {background-position: -160px 0;}
            37.5% {background-position: -240px 0;}
            50% {background-position: -320px 0;}
            62.5% {background-position: -400px 0;}
            75% {background-position: -480px 0;}
            87.5% {background-position: -560px 0;}
            100%{background-position: -640px 0;}
        }

@-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% {background-position: 0 0;}
            12.5% {background-position: -80px 0;}
            25% {background-position: -160px 0;}
            37.5% {background-position: -240px 0;}
            50% {background-position: -320px 0;}
            62.5% {background-position: -400px 0;}
            75% {background-position: -480px 0;}
            87.5% {background-position: -560px 0;}
            100%{background-position: -640px 0;}
        }

@-o-keyframes myfirst /* Opera */
        {
            0% {background-position: 0 0;}
            12.5% {background-position: -80px 0;}
            25% {background-position: -160px 0;}
            37.5% {background-position: -240px 0;}
            50% {background-position: -320px 0;}
            62.5% {background-position: -400px 0;}
            75% {background-position: -480px 0;}
            87.5% {background-position: -560px 0;}
            100%{background-position: -640px 0;}
        }

.one1{
            height:80px;
            width:80px;
            background-image: url(//cdn.attach.qdfuns.com/notes/pics/201711/24/093550rypvkf59nt53nbb9.png);
            background-position: 0px 0px;
            transition:all .8s;
            -moz-transition:all .8s; /* Firefox 4 */
            -webkit-transition:all .8s; /* Safari and Chrome */
            -o-transition:all .8s; /* Opera */
        }
        .one1:hover{
            animation:myfirst1 .8s infinite;
            -moz-animation:myfirst1 .8s infinite; /* Firefox */
            -webkit-animation:myfirst1 .8s infinite; /* Safari and Chrome */
            -o-animation:myfirst1 .8s infinite; /* Opera */
        }

@keyframes myfirst1
        {
            0% {transition: 0 0;}
            12.5% {background-position: -80px 0;}
            25% {background-position: -160px 0;}
            37.5% {background-position: -240px 0;}
            50% {background-position: -320px 0;}
            62.5% {background-position: -400px 0;}
            75% {background-position: -480px 0;}
            87.5% {background-position: -560px 0;}
            100%{background-position: -640px 0;}
        }

@-moz-keyframes myfirst1 /* Firefox */
        {
            0% {background-position: 0 0;}
            12.5% {background-position: -80px 0;}
            25% {background-position: -160px 0;}
            37.5% {background-position: -240px 0;}
            50% {background-position: -320px 0;}
            62.5% {background-position: -400px 0;}
            75% {background-position: -480px 0;}
            87.5% {background-position: -560px 0;}
            100%{background-position: -640px 0;}
        }

@-webkit-keyframes myfirst1 /* Safari and Chrome */
        {
            0% {background-position: 0 0;}
            12.5% {background-position: -80px 0;}
            25% {background-position: -160px 0;}
            37.5% {background-position: -240px 0;}
            50% {background-position: -320px 0;}
            62.5% {background-position: -400px 0;}
            75% {background-position: -480px 0;}
            87.5% {background-position: -560px 0;}
            100%{background-position: -640px 0;}
        }

@-o-keyframes myfirst1 /* Opera */
        {
            0% {background-position: 0 0;}
            12.5% {background-position: -80px 0;}
            25% {background-position: -160px 0;}
            37.5% {background-position: -240px 0;}
            50% {background-position: -320px 0;}
            62.5% {background-position: -400px 0;}
            75% {background-position: -480px 0;}
            87.5% {background-position: -560px 0;}
            100%{background-position: -640px 0;}
        }

.one2{
            height:80px;
            width:80px;
            background-image: url(//cdn.attach.qdfuns.com/notes/pics/201711/24/093550u50m6g1m7b14c1b1.png);
            background-position: 0px 0px;
            background-size: 640px;
            animation: heart-burst steps(7) 0.7s infinite;  
            animation-play-state: paused;
        }
        .one2.stop{
            animation-play-state: running;
        }
        .one3{
            height:80px;
            width:80px;
            background-image: url(//cdn.attach.qdfuns.com/notes/pics/201711/24/093550u50m6g1m7b14c1b1.png);
            background-position: 0px 0px;
            background-size: 640px;
            animation: heart-burst1 steps(7) 0.7s infinite; 
            animation-play-state: paused;
        }
        .one3.stop{
            animation-play-state: running;
        }
        @keyframes heart-burst {
          0% {
            background-position: 0%;
          }
          100% {
            background-position: 100%;
          }
        }
        @keyframes heart-burst1 {
          0% {
            background-position: 0%;
          }
          100% {
            background-position: 100%;
          }
        }
    </style>
</head>
<body id="bd">
<div class="one"></div>
<div class="one1"></div>

})

</script>
</body>
</html>

说一下，刚开始是第二个实现的但是发现不对（后来有查了一下，发现是，可以把图片切出来，每次切换一张图片）这个我没实现小伙伴可以动手试试

再说发现不对以后就找原因百度等等

找到了大神：http://www.zhangxinxu.com/study/201512/gif-stop-and-play-by-css3-animation.html 名字就不用我说了吧！！！

然后开始修改。结果如三。

bug：停止动画后，不像b站那样回去了，所以还是要js控制的。（或者没找到合适的方法，求个人生导师指点一二，点亮前路！）

因此：朕阵亡！（跟谁脑子好使一样）