利用css代码实现纸飞机效果实例源码

实现效果图如下：

实例代码如下：

    
    
    
 .wrap {
     position: relative;
     display: inline-block;
     width: 300px;
     height: 120px;
     -webkit-animation: fly 6s;
     -moz-animation: fly 6s;
     -o-animation: fly 6s;
     animation: fly 6s;:
 }
 .triangle1 { 
     position: absolute;
     top: 50px;
     left: 8px;
     height: 0;
     width: 0;
     border-left: 100px solid rgba(255, 255, 255, 0);
     border-right: 180px solid rgba(255, 255, 255, 0);
     border-bottom: 24px solid #f09c18;
     -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
     -ms-transform: rotate(-10deg);
     -o-transform: rotate(-10deg);
     transform: rotate(-10deg);
 }
 .triangle1:after { 
     position: absolute;
     left: -100px;
     content: '';
     display: block;
     width: 280px;
     height: 24px;
     border-bottom: 1px solid red;
 }
 .triangle2 { 
     position: absolute;
     top: 39px;
     left: 66px;
     height:0;
     width: 0;
     border-left: 40px solid rgba(255, 255, 255, 0);
     border-right: 180px solid rgba(255, 255, 255, 0);
     border-top: 24px solid #07d362;
     -webkit-transform: rotate(5.2deg);
     -moz-transform: rotate(5.2deg);
     -ms-transform: rotate(5.2deg);
     -o-transform: rotate(5.2deg);
     transform: rotate(5.2deg);
 }
 .triangle2:after { 
     position: absolute;
     top: -24px;
     left: -40px;
     content: '';
     display: block;
     width: 220px;
     height: 24px;
     border-top: 1px solid yellow;
 }
 .triangle3 { 
     position: absolute;
     top: 68px;
     left: 100px;
     height: 0;
     width: 0;
     border-left: 6px solid rgba(255, 255, 255, 0);
     border-right: 100px solid rgba(255, 255, 255, 0);
     border-bottom: 12px solid #2e302c;
     -webkit-transform: rotate(-16.8deg);
     -moz-transform: rotate(-16.8deg);
     -ms-transform: rotate(-16.8deg);
     -o-transform: rotate(-16.8deg);
     transform: rotate(-16.8deg);
 }
 @keyframes fly { 
     0% {
  top: 0;
  left: 0;
     }
     5% {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
     }
     50% {
  top: 200px;
  left: 800px;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
     }
     55% {
  -webkit-transform: rotate(170deg) rotateX(180deg);
  -moz-transform: rotate(170deg) rotateX(180deg);
  -ms-transform: rotate(170deg) rotateX(180deg);
  -o-transform: rotate(170deg) rotateX(180deg);
  transform: rotate(170deg) rotateX(180deg);
     }
     100% {
  top: 400px;
  left: 0;
  -webkit-transform: rotate(170deg) rotateX(180deg);
  -moz-transform: rotate(170deg) rotateX(180deg);
  -ms-transform: rotate(170deg) rotateX(180deg);
  -o-transform: rotate(170deg) rotateX(180deg);
  transform: rotate(170deg) rotateX(180deg);
     }
 }
    


    
 
 
 
    

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。