[分享]css3如何制作纸飞机

CSS3可以很轻松地制作出纸飞机的效果，以下是如何实现的详细步骤。

.fly-plane {
   position: relative;
   width: 0;
   height: 0;
   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;
   border-right: 50px solid #f0f0f0;
}

.fly-plane:before {
   content: "";
   position: absolute;
   top: -30px;
   left: -16px;
   width: 0;
   height: 0;
   border-top: 31px solid transparent;
   border-bottom: 31px solid transparent;
   border-right: 16px solid #f0f0f0;
}

.fly-plane:after {
   content: "";
   position: absolute;
   top: 0;
   left: -50px;
   width: 0;
   height: 0;
   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;
   border-right: 50px solid #f0f0f0;
   transform: skewX(-30deg);
}

/*添加动画效果*/
.fly-plane {
   animation: fly 5s infinite linear;
}

@keyframes fly {
   0% {
      transform: rotateZ(0deg) translate(0,0);
   }

   100% {
      transform: rotateZ(360deg) translate(500px,-500px);
   }
} 

以上代码中用到了伪类:before和:after，分别代表飞机的前翼和后翼，通过设置不同的边框颜色和旋转角度，实现了飞机的立体效果。同时，通过设置动画效果，让飞机飞行起来。