css3飞机飞 |css3 div从入门到精通

/*定义主体样式*/
#airplane {
width: 80px;
height: 80px;
background: url(images/airplane.png) no-repeat;
position: fixed;
left: -50px;
top: 50%;
transform: translateY(-50%);
transition: all 5s cubic-bezier(.5, -0.5, .5, 1.5);
animation: airplane 5s infinite linear;
}
/*定义关键帧动画*/
@keyframes airplane {
0% {
left: -50px;
transform: translateY(-50%);
}
100% {
left: 100%;
transform: translateY(-50%) rotateZ(720deg);
opacity: 0;
}
}

首先，大家要定义主体样式，包括高、宽、背景图片等。其中有几个关键属性，需要解释一下。position: fixed; 是固定定位，让飞机在浏览器中固定位置不动。left: -50px; 是飞机的初始位置，通常是浏览器可视区域之外。transform: translateY(-50%); 是垂直居中的方法。transition: all 5s cubic-bezier(.5, -0.5, .5, 1.5); 是过渡效果，让飞机移动时更加平滑、自然。 animation: airplane 5s infinite linear; 是动画效果，这里大家使用了关键帧动画。

然后，大家需要定义关键帧动画。在这里，大家使用了@keyframes 来定义关键帧。它包括两个百分比，分别是0%和100%。在0%的时候，飞机的left属性是-50px，transform属性是translateY(-50%)。也就是说，飞机在起飞前，先在屏幕左边隐藏起来。在100%的时候，飞机的left属性是100%（也就是飞到屏幕最右边），transform属性是translateY(-50%) rotateZ(720deg)。也就是说，飞机在飞过去的同时，还会旋转，然后在飞出屏幕之前消失。