效果:

精灵图: code:


<div class="girl t1"></div>
<div class="girl t2"></div>


<style>
    .t1{
        width: 220px;
        height: 300px;
    }
    .t2{
        width: 120px;
        height: 200px;
    }
    .girl{
        float: left;
        -webkit-animation: run .7s steps(7) infinite;
        background-image: url(https://static.webfed.cn/o_1acen802t1ues153fpjf11k76kue.png);
        background-size: 700% 100%;
    }
    @-webkit-keyframes run {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 700% 0; 
        }
    }
</style>

利用background-size自适应的原理,再使用百分比作为宽度和高度的单位,例子中的精灵图有7列,所以设置background-size: 700% 100%。使用background-position就能取到精灵图里每个元素,取图中的第二个元素:background-position-x: 200%。

在移动端使用: https://www.webfed.cn/static/demo/background-size-spirit.html



background-size 属性介绍:http://www.w3school.com.cn/cssref/pr_background-size.asp