Heim > Web-Frontend > CSS-Tutorial > Beispiel für die Verwendung von CSS-Code zur Erzielung des Papierfliegereffekts

Beispiel für die Verwendung von CSS-Code zur Erzielung des Papierfliegereffekts

高洛峰
Freigeben: 2017-02-25 14:49:54
Original
2103 Leute haben es durchsucht

Das Implementierungsrendering lautet wie folgt:

Beispiel für die Verwendung von CSS-Code zur Erzielung des Papierfliegereffekts

Der Beispielcode lautet wie folgt:


<!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>
Nach dem Login kopieren


Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels Einige Vorteile für das Studium oder die Arbeit aller. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen.

Weitere verwandte Artikel zu Beispielen für die Verwendung von CSS-Code zur Erzielung von Papierfliegereffekten finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage