Code zum Erstellen eines Schmetterlings, der mit CSS3 schlägt

Dieser Artikel stellt hauptsächlich die relevanten Informationen zum Beispiel vor, wie man mit reinem CSS3 einen Schmetterling zum Flügelschlagen bringt. Ich möchte ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Reines CSS3, um einen Schmetterling zum Flügelschlagen zu bringen, schauen wir uns zuerst den Effekt an

, der Effekt ist ziemlich gut, nicht wahr?

Laden Sie den Code hoch:

html

<p id="butterfly">
    <p class="leftSide"></p>
    <p class="body"></p>
    <p class="rightSide"></p>
</p>

css

body{
            background: url("./images/bg.jpg") no-repeat;
        }
        #butterfly{
            width: 600px;
            height: 500px;
            position: relative;
            transform: scale(0.35);
            transform-style: preserve-3d;
        }
        .leftSide{
            width: 267px;
            height: 421px;
            background: url("./images/leftSide.png") no-repeat;
            position: absolute;
            left: 26px;
            top: 40px;
            animation: left 2s infinite;
            z-index: 9999;
        }
        @keyframes left {
            0%{
                transform: rotateY(0deg);
                transform-origin: right center;
                perspective: 201px;

            }
            50%{
                transform: rotateY(70deg);
                transform-origin: right center;
                perspective: 201px;

            }
            100%{
                transform: rotateY(0deg);
                transform-origin: right center;
                perspective: 201px;
            }
        }
        @keyframes right {
            0%{
                transform: rotateY(0);
                transform-origin: left center;
                perspective: 201px;

            }
            50%{
                transform: rotateY(-70deg);
                transform-origin: left center;
                perspective: 201px;

            }
            100%{
                transform: rotateY(0);
                transform-origin: left center;
                perspective: 201px;

            }
        }
        .body{
            width: 152px;
            height: 328px;
            background: url("./images/body.png") no-repeat;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            z-index: 9999;
        }
        .rightSide{
            width: 284px;
            height: 460px;
            background: url("./images/rightSide.png") no-repeat;
            position: absolute;
            right: 26px;
            top: 58px;
            animation: right 2s infinite;
            z-index: 9999;
        }

Vorher einige CSS-Eigenschaften vorstellen;

@keyframes

1. Durch die @keyframes-Regel können wir Animationen erstellen

2. Das Prinzip der Animationserstellung besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen zu ändern

3. und dabei den Zeitpunkt anzugeben, zu dem die Änderung auftritt Prozentsatz oder durch die Schlüsselwörter „from“ und „to“ , entsprechend 0 % und 100 %.

4. 0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation

transform: rotationY( )

1. Transformationsattribut wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

2. rotateY() definiert eine 3D-Rotation entlang der Y-Achse.

Dieses Bild veranschaulicht die xyz-Achse sehr intuitiv. Tatsächlich sollten Studenten, die 3D-Modellierungssoftware wie 3DS MAX studiert haben, damit besser vertraut sein 3-Achsen-Ausrichtung.

Implementierungsidee: Verwenden Sie zuerst die Sohn- und Vaterphase, um den linken Flügel, den rechten Flügel und den Körper absolut zu positionieren und zusammenzusetzen, und verwenden Sie dann die DrehungY der Transformation, um sie entlang der y-Achse zu drehen Hier wird die @keyframe-Animation zum Drehen verwendet und die Aktion wird dann wiederholt.

Ich möchte mich auch auf das Attribut transform-style:reserve-3d; konzentrieren. Die Beschreibung von w3c besteht darin, den konvertierten Unterelementen die Beibehaltung ihrer 3D-Transformation zu ermöglichen. Das heißt, alle Unterelemente werden im 3D-Raum dargestellt. Wenn es hingegen auf „flach“ eingestellt ist, werden alle Unterelemente im 2D-Raum dargestellt.

Das Obige ist der gesamte Inhalt Ich hoffe, dass es für alle hilfreich ist. Weitere Informationen finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie CSS3, um einen Ballon-Stil-Effekt zu erzielen

Verwenden Sie CSS3, um WeChat-Chat-Blasen zu implementieren

So verwenden Sie HTML und CSS3, um den Herzschlag zu simulieren

Das obige ist der detaillierte Inhalt vonCode zum Erstellen eines Schmetterlings, der mit CSS3 schlägt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!