Exemple d'utilisation de code CSS pour obtenir un effet avion en papier-tutoriel CSS-php.cn

Exemple d'utilisation de code CSS pour obtenir un effet avion en papier

高洛峰

Libérer： 2017-02-25 14:49:54

original

2116 Les gens l'ont consulté

Le rendu de l'implémentation est le suivant :

Exemple dutilisation de code CSS pour obtenir un effet avion en papier

L'exemple de code est le suivant :

<!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: &#39;&#39;;
            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: &#39;&#39;;
            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>
    <p class="wrap">
        <p class="triangle1"></p>
        <p class="triangle2"></p>
        <p class="triangle3"></p>
    </p>
</body>
</html>

Copier après la connexion

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter. quelques avantages pour les études ou le travail de chacun. Pour obtenir de l'aide, si vous avez des questions, vous pouvez laisser un message pour communiquer.

Pour plus d'articles liés à des exemples d'utilisation de code CSS pour obtenir un effet avion en papier, veuillez faire attention au site Web PHP chinois !