jQuery+CSS3小鸟飞翔动画
1、准备好需要用到的图标。
2、新建html文档。
3、<div class="box">
<div></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、查看效果。
