1、准备好需要用到的图标。
2、新建html文档。
3、<div class="box"> <d坡纠课柩iv></div></div>
4、书写css代码。<style>* { margin: 0; padding: 0; }.box { width: 564px; height: 170px; }.box div { width: 141px; height: 85px; float: left; margin-top: 150px; margin-left: 50px; background: url(images/bird1.png);/* 用于Firefox 可无视 */ --: myFrist 1s linear infinite; -moz-: myFrist 1s linear infinite; -o-: myFrist 1s linear infinite; : myFrist 1s linear infinite; }@--keyframes myFrist { 0% {background:url(images/bird1.png);background-size: 100% 100%}12.5% {background:url(images/bird2.png);background-size: 100% 100%}25% {background:url(images/bird3.png);background-size: 100% 100%}37.5% {background:url(images/bird4.png);background-size: 100% 100%}50% {background:url(images/bird5.png);background-size: 100% 100%}65.7% {background:url(images/bird6.png);background-size: 100% 100%}75% {background:url(images/bird7.png);background-size: 100% 100%}87.5% {background:url(images/bird8.png);background-size: 100% 100%}100% {background:url(images/bird1.png);background-size: 100% 100%}}@-moz-keyframes myFrist { 0% {background:url(images/bird1.png);background-size: 100% 100%}12.5% {background:url(images/bird2.png);background-size: 100% 100%}25% {background:url(images/bird3.png);background-size: 100% 100%}37.5% {background:url(images/bird4.png);background-size: 100% 100%}50% {background:url(images/bird5.png);background-size: 100% 100%}65.7% {background:url(images/bird6.png);background-size: 100% 100%}75% {background:url(images/bird7.png);background-size: 100% 100%}87.5% {background:url(images/bird8.png);background-size: 100% 100%}100% {background:url(images/bird1.png);background-size: 100% 100%}}@-o-keyframes myFrist { 0% {background:url(images/bird1.png);background-size: 100% 100%}12.5% {background:url(images/bird2.png);background-size: 100% 100%}25% {background:url(images/bird3.png);background-size: 100% 100%}37.5% {background:url(images/bird4.png);background-size: 100% 100%}50% {background:url(images/bird5.png);background-size: 100% 100%}65.7% {background:url(images/bird6.png);background-size: 100% 100%}75% {background:url(images/bird7.png);background-size: 100% 100%}87.5% {background:url(images/bird8.png);background-size: 100% 100%}100% {background:url(images/bird1.png);background-size: 100% 100%}}@keyframes myFrist { 0% {background:url(images/bird1.png);background-size: 100% 100%}12.5% {background:url(images/bird2.png);background-size: 100% 100%}25% {background:url(images/bird3.png);background-size: 100% 100%}37.5% {background:url(images/bird4.png);background-size: 100% 100%}50% {background:url(images/bird5.png);background-size: 100% 100%}65.7% {background:url(images/bird6.png);background-size: 100% 100%}75% {background:url(images/bird7.png);background-size: 100% 100%}87.5% {background:url(images/bird8.png);background-size: 100% 100%}100% {background:url(images/bird1.png);background-size: 100% 100%}}</style>
5、代码整体结构。
6、查看效果。
