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

前端  /  管理员 发布于 7年前   181

实现效果图如下：

实例代码如下：

<!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>

总结

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


  • 上一条：
    CSS水平垂直居中的几种方法总结
    下一条：
    用CSS属性transparent实现各种三角形示例代码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客