首先非常感谢网友Yik的无私分享，此作品是他分享到JquerySchool网站上的第一个原创作品，实现了纯CSS3战斗机飞来飞去动画效果，代码很简洁，非常适合学习CSS3的网友去看，好好利用哇。。。
CSS3样式代码如下：
@charset "UTF-8";
body {
margin: 0;
}
.wrap {
position: relative;
width: 100%;
overflow: hidden;
}
.banner {
position: relative;
width: 1000px;
height: 60px;
margin: auto;
}
/*战斗机*/
.fighter {
position: absolute;
top: 10px;
left: 50%;
z-index: 1;
width: 1000px;
height: 50px;
margin-left: -180px;
overflow: hidden;
background: url(../images/fighter.png) no-repeat 0 0;
-webkit-animation: fighter 12s linear infinite;
}
@-webkit-keyframes fighter {
0% {
left: 100%;
margin-left: 0;
-webkit-transform: scale(1,1);
}
30% {
left: 0;
margin-left: -1000px;
-webkit-transform: scale(1,1);
}
50% {
left: 0;
margin-left: -1000px;
margin-right: 0;
-webkit-transform: scale(-1,1);
}
80% {
left: 100%;
margin-left: 0;
-webkit-transform: scale(-1,1);
}
100% {
left: 100%;
margin-left: 0;
-webkit-transform: scale(1,1);
}
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友Yik HTML5 滑动插件 图片滚动 css3 动画插件