Wie erzielt man mit CSS3 einen Meteorschauereffekt? (Codebeispiel)

In diesem Artikel wird anhand von Codebeispielen erläutert, wie Sie mithilfe von CSS3 den Meteorschauereffekt erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

[Empfohlenes Tutorial: CSS-Video-Tutorial]

Hinweis: Im Haupttext geht es nur um die Implementierung eines einzelnen Meteorschauers. Bei mehreren Effekten müssen lediglich der Startpunkt und die Breite eines einzelnen leicht geändert werden Konkrete Beispiele finden Sie unter der Github-Adresse am Ende des Artikels.

Schwierigkeitsfaktor

☆☆☆☆

Rendering

Idee

Die Umsetzung des Meteorschauers gliedert sich in drei Teile:

(1) Verwenden Sie zum Implementieren das Border-Attribut ein rechtwinkliges Dreieck. Für die Implementierung von Dreiecken können Sie sich auf CSS zum Zeichnen von Dreiecken beziehen. (2) Fügen Sie dem rechtwinkligen Dreieck einen kreisförmigen Effekt hinzu und schwächen Sie die Kanten der rechtwinkligen Form ab Rechtwinkliges Dreieck bewegen

HTML

<span class="shooting-star animation"></span>

Analyse:

html Fügen Sie einfach einen Animationscontainer hinzu

CSS

.shooting-star {
    margin: 30px;
    display: block;
    width: 0;
    border-radius: 2px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: transparent;
    border-left-width: 230px;
    border-left-style: solid;
    border-left-color: white;
    border-right-width: 230px;
    border-right-style: solid;
    border-right-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
.animation {
    animation: fly 3s infinite;
}
@keyframes fly {
    from {
        margin-left: 900px;
        border-left-width: 130px;
        border-right-width: 130px;
    }
    to {
        margin-left: -900px;
        border-left-width: 360px;
        border-right-width: 360px;
    }
}

Analyse:

Rechtes Dreieck

Um das rechtwinklige Dreieck zu erkennen, zuerst Bestimmen Sie die Ausrichtung In diesem Fall ist die Ausrichtung des rechten Winkels die untere linke Ecke, sodass der linke Rand und der untere Rand farbig und der rechte Rand und der obere Rand transparent sein sollen die Form einer Linie, daher ist die Höhe des rechtwinkligen Dreiecks klein und die Breite groß. Daher sind die hier eingestellten Werte für die linke und rechte Randbreite sehr groß und die Werte für die obere und untere Randbreite sehr klein

Ähnlich wie bei span müssen Elemente, deren Anzeige-Standardattributwert nicht block ist, festgelegt werden Das Anzeigeattribut zum Block
• • Kreiseffekt
  • Durch den Randradius kann der kreisförmige Rand festgelegt werden, und der Wert des Randradius kann mit der Höhe des rechtwinkligen Dreiecks identisch sein (beachten Sie, dass der Höhenwert sein sollte). Summe der Werte für „Rand-Oben-Breite“ und „Rand-Bottom-Breite“)
Animationseffekt
• Übergebener Rand-Links Legen Sie die Anfangs- und Endposition der Animation fest
  • Erzielen Sie den Effekt, die Länge des Meteors durch Ändern zu ändern der Wert von border-*-width
Die Animationsdauer bestimmt die Zeit, die der Meteor benötigt, um die Schnittstelle zu passieren
• Die Anzahl der Animationen ist auf unbegrenzt eingestellt
  • Wissenspunkte
Zu implementierendes CSS Dreiecke
Rand mit abgerundeten Ecken
• Animation zum Hinzufügen von Animationseffekten
• @keyframes benutzerdefinierte Animation
Gitbub-Quellcode:
https:// github.com/ nanzhangren/CSS_skills/ blob/master/shooting_star/shooting_star.html

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonWie erzielt man mit CSS3 einen Meteorschauereffekt? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!