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

实现效果图如下：

实例代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>纸飞机</title>    <style>        .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);            }        }    </style></head><body>    <div class="wrap">        <div class="triangle1"></div>        <div class="triangle2"></div>        <div class="triangle3"></div>    </div></body></html>