iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何使用css代码实现纸飞机效果
  • 819

0
分享到

如何使用css代码实现纸飞机效果

2024-04-02 19:04:59 819人浏览 安东尼
摘要

这篇文章主要介绍了如何使用CSS代码实现纸飞机效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。实现效果图如下：实例代码如下：<!DO

这篇文章主要介绍了如何使用CSS代码实现纸飞机效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

实现效果图如下：

如何使用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>

感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用css代码实现纸飞机效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网JavaScript频道，更多相关知识等着你来学习!

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何使用css代码实现纸飞机效果

本文链接: https://www.lsjlt.com/news/68796.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何使用css代码实现纸飞机效果
    这篇文章主要介绍了如何使用css代码实现纸飞机效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。实现效果图如下：实例代码如下：<!DO...
    99+
    2024-04-02
  • CSS3如何实现童年的纸飞机
    这篇文章主要介绍CSS3如何实现童年的纸飞机 ，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！基本全用css来实现，只有一小部分的js首先看一下飞机的构造灰色区域为可折叠区域白色区域为机身三角形由border画出来的再...
    99+
    2023-06-08
  • CSS实现3D书本效果代码
    这篇文章主要介绍了CSS实现3D书本效果代码，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。话不多说，先来看一下效果图源代码如下<!DOCTYPE html&g...
    99+
    2023-06-08
  • 怎么使用纯CSS实现锡纸撕开的文字效果
    小编给大家分享一下怎么使用纯CSS实现锡纸撕开的文字效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 　　代码解读 　　定...
    99+
    2024-04-02
  • 如何使用CSS实现极光效果
    小编给大家分享一下如何使用CSS实现极光效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！像是这样：emmm，这有点难为人了。不...
    99+
    2024-04-02
  • 如何使用CSS实现斜线效果
    本篇内容主要讲解“如何使用CSS实现斜线效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用CSS实现斜线效果”吧!如何使用单个标签，实现下图所示的斜线效...
    99+
    2024-04-02
  • 如何使用css实现烟雾效果
    这篇文章主要介绍了如何使用css实现烟雾效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何使用css实现烟雾效果文章都会有所收获，下面我们一起来看看吧。仔细观察烟雾效果，有...
    99+
    2024-04-02
  • css实现“加号”效果的实例代码
    这篇文章给大家分享的是有关css实现“加号”效果的实例代码的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。实现下图的加号效果：若想实现这个效果， 只需一个div元素即可搞定。需要用到css的为了before和aft...
    99+
    2023-06-08
  • 实用CSS效果代码有哪些
    本篇内容主要讲解“实用CSS效果代码有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“实用CSS效果代码有哪些”吧!1 更改输入框的光标颜色MDN:caret...
    99+
    2024-04-02
  • 如何使用css实现过渡+3D效果
    这篇文章主要为大家展示了“如何使用css实现过渡+3D效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用css实现过渡+3D效果”这篇文章吧。css过渡...
    99+
    2024-04-02
  • 如何使用CSS实现打点Loading效果
    本篇内容主要讲解“如何使用CSS实现打点Loading效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用CSS实现打点Loading效果”吧!基于box...
    99+
    2024-04-02
  • 如何使用css实现3D穿梭效果
    这篇文章主要介绍“如何使用css实现3D穿梭效果”，在日常操作中，相信很多人在如何使用css实现3D穿梭效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用css实现3...
    99+
    2024-04-02
  • 如何使用纯css实现开关效果
    这篇文章将为大家详细讲解有关如何使用纯css实现开关效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。首先是构思我们使用<input type="checkbox">标签来...
    99+
    2023-06-08
  • css如何使用RGBA实现透明效果
    这篇文章将为大家详细讲解有关css如何使用RGBA实现透明效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。使用 RGBA 实现透明效果　　目前，Web 设计中的透明效果主要靠 PNG 图片实现(但在 I...
    99+
    2023-06-27
  • 怎么使用纯CSS代码实现圆点错觉的效果
    这篇文章将为大家详细讲解有关怎么使用纯CSS代码实现圆点错觉的效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　代码解读 　　此项目无用户自定义的dom元素，利...
    99+
    2024-04-02
  • 怎么使用纯CSS代码实现蚊香燃烧的效果
    这篇文章主要介绍怎么使用纯CSS代码实现蚊香燃烧的效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 　　代码解读 　　定义dom，容器中包含8个子元素： 　　<divc...
    99+
    2024-04-02
  • CSS代码怎么实现loading动画效果
    本篇内容介绍了“CSS代码怎么实现loading动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果：代码使用了CSS的keyfram...
    99+
    2023-07-04
  • 如何使用CSS实现图片翻转效果
    在现代网站设计和开发中，图片翻转效果已经成为了一个非常流行和常见的设计元素。通过这种效果，用户可以更加直观地感受到网站的活力和动态感。在本文中，我们将重点讨论如何使用CSS实现这种图片翻转效果。首先，我们需要明确一下CSS3中提供了两种方式...
    99+
    2023-05-14
  • 如何使用CSS实现Tab页切换效果
    这篇文章主要介绍如何使用CSS实现Tab页切换效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！三种写法：利用 :hover 选择器缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一个的效果利用 a标...
    99+
    2023-06-08
  • 使用纯CSS如何实现3D旋转效果
    小编给大家分享一下使用纯CSS如何实现3D旋转效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！主要使用CSS中的 preserve-3d 、perspective 属性实现3D效果效果HTML代码<body>...
    99+
    2023-06-08
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作