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

发布时间：2016-12-19 16:17:28 作者：ToyLevom

这篇文章主要给大家介绍了如何利用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>

总结

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

Tag：纸飞机 css

利用CSS实现书签效果实例源码
这篇文章通过纯CSS代码写了个书签效果，实现后的书签效果很漂亮，文中给出了完整的示例代码，实现的代码也很简单，很方便大家理解和学习，有需要的朋友们可以参考学习，下
2016-12-15
纯css3实现的圆形从中心向四周扩散动画效果源码
这是一款基于纯css3实现的圆形从中心向四周扩散动画效果源码。画面上的圆形呈现出周期性的向四周扩散显示的动画效果。该特效完全采用纯css3实现，没有引入任何外部图形元素
2016-12-12
使用CSS3实现一个3D相册效果实例
本篇文章主要介绍了使用CSS3实现一个3D相册效果，小编觉得不错。这里整理了详细的代码,有需要的小伙伴可以参考下。
2016-12-03
纯CSS3实现鼠标悬停卡片翻转切换特效源码
纯CSS3实现鼠标悬停卡片翻转切换特效源码是一款鼠标移到图片上面翻转切换展示，同时文字框慢慢滑动居中。本段代码可以在各个网页使用，有需要的朋友可以直接下载使用
2017-02-23
CSS3实现文字波浪线效果示例代码
最近在做项目的时候，发现文字下方有个波浪线，寻思着，能不能用css来实现，减少资源，遂参考一些资料，后来真的实现了。所以就有了这篇文章了，本文详细的介绍了利用CSS3
2016-11-20
CSS3 2D模拟实现摩天轮旋转效果
这篇文章主要为大家详细介绍了CSS3 2D模拟实现摩天轮旋转效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-16
css3基于svg绘制的唐老鸭图片样式效果源码
这是一款css3基于svg绘制的唐老鸭图片样式效果源码。完全采用svg技术实现，没有引入任何外部图形元素与js脚本元素
2016-11-07
CSS3实现同时执行倾斜和旋转的动画效果
这篇文章通过实例代码给大家主要介绍了，如何利用CSS3实现同时执行倾斜和旋转的动画效果，文中给出了完整的实例代码，大家直接运行就可以看到效果，有需要的朋友们可以参考
2016-10-27
CSS3实现个性可爱的甜品店动画幻灯片切换特效源码
CSS3实现个性可爱的甜品店动画幻灯片切换特效源码是一款个性可爱的动画幻灯片切换代码。本段代码可以在各个网页使用，有需要的朋友可以直接下载使用
2016-10-26
CSS3点击按钮实现背景渐变动画效果
这篇文章给大家介绍的是，利用CSS3实现当点击按钮的时候，按钮的背景是渐变动画的效果，实现后的效果非常好，开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受，感
2016-10-19

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

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容