移动端精灵图动画实现自适应

参考：https://www.cnblogs.com/jiujiaoyangkang/p/5320548.html

这里使用vw作单位，scss自定义函数

@function vw($p) {
    @return $p/640*100vw;
}

        .player{
            width: vw(100);//要显示的宽
            height: vw(171);//要显示的高
            background: url(../images/player.png) no-repeat;
            background-size:vw(600) vw(171);//精灵图总宽高
            left: -19%;
            top: 51%;
            position: absolute;
            animation:run .4s step-start infinite;
        }

@keyframes run{
    0%{
        background-position:vw(-3) 0
    }
    20%{
        background-position:vw(-99) 0; 
    }
    40%{
        background-position:vw(-197) 0;
    }
    60%{
        background-position:vw(-300) 0;
    }
    80%{
        background-position:vw(-400) 0;
    }
    100%{
        background-position:vw(-493) 0;
    }
}