精灵图（sprite）CSS动画实现

本文主要是介绍精灵图（sprite）CSS动画实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

精灵图

动画效果如下

HTML代码

<div class="boxA"></div>

css代码

.boxA {width: 100px;height: 400px;background:url("https://img-ask.csdn.net/upload/202005/13/1589349016_808127.png") no-repeat;background-size: 600% 100%;-webkit-animation: bird-slow .5s steps(5) infinite;animation: bird-slow .5s steps(5) infinite;
}@keyframes bird-slow {0% {background-position: 0% 0%;}100% {background-position: 100% 0%;}
}
@-webkit-keyframes bird-slow {0% {background-position: 0% 0%;}100% {background-position: 100% 0%;}
}

这篇关于精灵图（sprite）CSS动画实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---