Beispielcode zur Implementierung einer Sternenhimmelanimation mit CSS3 Advanced LESS

In diesem Artikel wird der Beispielcode für erweitertes CSS3 LESS zur Realisierung einer Sternenhimmelanimation vorgestellt, der wie folgt mit Ihnen geteilt wird:

Die Effektanimation ist wie folgt:

Vorschau-Link und Code in meinem Codepen: https://codepen.io/lio-mengxiang/pen/YzKrEde

Knowledge Point-Vorschau

Die Wissenspunkte dieses Artikels zu weniger Kenntnissen und CSS-Kenntnissen umfassen:

• So schreiben Sie eine Schleife in weniger
• So verwenden Sie JS-Ausdrücke in weniger
• CSS3-Eigenschaft: Wie Box-Shadow Hunderte von Sternen erzeugt
• CSS3-Eigenschaft: Hintergrund: radialer Farbverlauf, wie man eine Hintergrundfarbe mit Farbverlauf erzeugt

HTML-Dokumentstruktur

Erstens ist die HTML-Dateistruktur sehr einfach und sieht wie folgt aus:

<div>
    <div id="start1"></div>
    <div id="start2"></div>
    <div id="start3"></div>
</div>

Schritt 1: radial-gradient erzeugt einen Verlaufshintergrund

Setzen Sie auf die HTML- und Body-Tags

* {
    Polsterung: 0;
    Rand: 0;
}

html, Text {
    Hintergrund: radialer Farbverlauf (Ellipse unten, #1B2735 0 %, #090A0F 100 %);
    Überlauf: versteckt;
    Höhe: 100%;
}

Die Wirkung ist wie folgt:

Zum Vergleich: Das Hintergrundbild, das ich gezeichnet habe, ist nicht rein schwarz, also habe ich zum Vergleich ein rein schwarzes Bild eingefügt. Sie können sehen, dass das Bild oben nicht so schwarz ist, sondern ein bisschen grau.

Hier ist die Einführung in den Radialgradientenparameter

Ellipse zeigt an, dass ich einen elliptischen Farbverlauf verwende. Wie man ihn verwendet, können Sie im Bild unten sehen.

// Die Parameter des obigen Bildes sind radial-gradient(ellipse,#ffffff, #6a6a6a)

Das heißt, die Farbe ist ein elliptischer Farbverlauf von Weiß #ffffff nach Grau #6a6a6a

unten Das bedeutet, dass sich die Mitte des elliptischen Gradienten unten befindet. Die genaue Wirkung können Sie der folgenden Abbildung entnehmen:

// Die Parameter des obigen Bildes sind radial-gradient(ellipse at bottom,#ffffff, #6a6a6a)

Okay, an diesem Punkt haben wir den Gradienten abgeschlossen

Schritt 2: Wie Box-Shadow Hunderte von Sternen erzeugt

Zuerst müssen wir drei Probleme lösen. Das erste ist, wie man eine Schleife mit Less schreibt. Bitte sehen Sie sich den folgenden Less-Code an (eine detaillierte Erklärung finden Sie unter dem Code).

2.1 So implementieren Sie eine Schleife in Less

Hier sind einige Beispiele:

.loop(@counter) wenn(@counter > 0) {
  .h@{Zähler} {
    Polsterung: (10px*@counter);
  }
  .loop((@counter - 1)); //ruft sich selbst rekursiv auf}
div{
  .loop(5);
}

//Kompilieren und ausgeben div .h5 {
  Polsterung: 50px;
}
div .h4 {
  Polsterung: 40px;
}
div .h3 {
  Polsterung: 30px;
}
div .h2 {
  Polsterung: 20px;
}
div .h1 {
  Polsterung: 10px;
}

• .loop(@counter) when(@counter > 0) ist eine Funktion in less, was bedeutet, dass eine Schleifenfunktion definiert ist
• @counter ist die Variable, die an die Funktion übergeben wird
• when(@counter > 0) bedeutet, dass diese Funktion ausgeführt wird, wenn der Wert der Variable @counter > 0 ist.
• .loop((@counter - 1)) Dies ist ein rekursiver Aufruf

Wir kommen daher zu dem Schluss, dass Less Schleifen implementiert, indem die definierte Funktion rekursiv aufgerufen wird.

Als Nächstes lösen wir das zweite Problem, nämlich wie man JS-Ausdrücke in Less schreibt.

2.2 So schreiben Sie JS-Ausdrücke in weniger

.loop(@counter) wenn(@counter > 0) {
  Auffüllen: ~`@{counter} + Math.round(2.4)`;
  .loop(@counter - 1); //ruft sich selbst rekursiv auf}
div{
  .Schleife(2);
}

//Generiere den folgenden Code div {
  Polsterung: 4;
  Polsterung: 3;
}

Wir sind also zu dem Schluss gekommen, dass die Verwendung von JS-Ausdrücken in Less darin besteht, mit ~ zu beginnen und den Ausdruck dann mit `` zu umschließen.

Als Nächstes lösen wir das dritte Problem, nämlich wie man mit der Box-Shadow-Eigenschaft Hunderte von Sternen erzeugt.

2.3 So verwenden Sie eine Less-Schleife, um Hunderte von Sternen auf der Box-Shadow-Eigenschaft zu generieren

Diese Sterne sind eigentlich kleine quadratische Punkte. Wir erzeugen zunächst 4 kleine quadratische Punkte.

// 
div
{
	Breite: 10px;
	Höhe: 10px;
	Box-Schatten: 10px 0px #9bcded, 50px 0px #9bcded, 10px 40px #9bcded, 50px 40px #9bcded;
}

Die Wirkung ist wie folgt

Hierbei werden mehrere Box-Shadow-Werte genutzt um ein Quadrat zu erzeugen.

// Beispielsweise bedeutet das folgende Attribut 10px 0px #9bcded, dass sich ein kleiner Punkt in der Farbe #9bcded bei 10px auf der x-Achse und 0px auf der y-Achse relativ zum div-Element befindet. // Da das div selbst ein Quadrat mit einer Breite von 10px und einer Höhe von 10px ist, ist sein Box-Shadow auch ein quadratischer Box-Shadow: 10px 0px #9bcded,
Breite: 10px;
Höhe: 10px;

Als nächstes müssen wir die Less-Schleife kombinieren, um mehr Blöcke (Sterne) auf dem Box-Shadow zu erzeugen:

// Definieren Sie zunächst eine Mixin-Funktion mit dem Parameter @n. Die Bedingung ist, dass der Code in der Funktion nur ausgeführt wird, wenn @n > 0.mixin(@n) when(@n > 0) {
    Box-Schatten+: ~`Math.round(Math.random() * 2000) + 'px' + ' ' +Math.round(Math.random() * 2000) + 'px #FFF' `;
    .mixin((@n - 1));
 }

Die obige Funktion befindet sich hauptsächlich im Box-Shadow und umfasst hauptsächlich 3 Parameter

• Erzeugt Zufallswerte von 0 bis 2000 auf der x-Achse (Math.round(Math.random() * 2000) + 'px')
• Erzeugt Zufallszahlen von 0 bis 2000 auf der y-Achse (Math.round(Math.random() * 2000) + 'px #FFF' `)
• Die Farbe ist #FFF

Wenn wir mixin(100) aufrufen, generieren wir 100 weiße Quadrate (Sterne) auf einem 2000 x 2000 großen Hintergrund.

Schritt 3: HTML kombinieren, um Sterne zu generieren

Die bisherige HTML-Struktur ist wie folgt

<div>
    <div id="start1"></div>
    <div id="start2"></div>
    <div id="start3"></div>
</div>

Der weniger ist wie folgt:

// start1 erzeugt 700 Sterne mit einer Länge von 1px und einer Breite von 1px. Dies sind kleine Sterne. // Kleine Sterne stellen weit entfernte Sterne dar, große Sterne stellen nahe Sterne dar, sodass ein räumliches Gefühl entsteht. #start1 {
    .mixin(700);
    Breite: 1px;
    Höhe: 1px;
    Animation: AnimStar 50er linear unendlich;
    Animationsverzögerung: -10 s;
}
// start2 erzeugt 200 Sterne mit einer Länge von 2px und einer Breite von 2px #start2 {
    .mixin(200);
    Breite: 2px;
    Höhe: 2px;
    Animation: AnimStar 100s linear unendlich;
    Animationsverzögerung: -8s;
}
// start3 erzeugt 100 Sterne mit einer Länge von 3px und einer Breite von 3px #start3 {
    .mixin(100);
    Breite: 3px;
    Höhe: 3px;
    Animation: AnimStar 150s linear unendlich;
    Animationsverzögerung: -5 s;
}
// Der Animationseffekt ist wie folgt @keyframes animStar {
    von { transform: translateY(0px) }
    zu { transform: translateY(-2000px) }
}

Dieser Artikel ist fertig. Sie können zu Codepen gehen, um den Effekt selbst auszuprobieren.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.