/*通过图片定位加过渡实现动画替换效果:*/
i{
display: block; width:13px; height:22px;
margin:100px; cursor:pointer;
background:url(jd2015img.png) no-repeat 0 -0;/*找到精灵图中手机图片的位置:默认的位置*/
transition: background-position 0.2s ease 0.1s; /*核心：要给background-position做动画效果*/
}
i:hover{
background-position: 0 -25px;
}
<body>
<i></i>
</body>