CSS nutzt geschickt Farbverläufe, um eine erweiterte Hintergrundlichtanimation zu erzielen

erreichen

Dieser Effekt lässt sich mit CSS nur schwer vollständig reproduzieren. Die durch CSS simulierten Lichteffekte und Schatten sind von relativ geringer Qualität und wir können nur sagen, dass wir versuchen, sie so weit wie möglich wiederherzustellen.

Tatsächlich ist jeder Lichtsatz grundsätzlich gleich, sodass wir nur einen davon implementieren müssen, um fast den gesamten Effekt zu erzielen.

Beobachten Sie diesen Effekt:

Sein Kern ist eigentlich der Winkelgradient - conic-gradient(). Mit dem Winkelgradienten können wir ungefähr den folgenden Effekt erzielen:

<div></div>

div {

    Breite: 1000px;

    Höhe: 600px;

    Hintergrund:

        Kegelförmiger Gradient(

            von -45 Grad bei 400px 300px,

            hsla (170 Grad, 100 %, 70 %, 0,7),

            transparent 50%,

            transparent),

            linearer Farbverlauf (-45 Grad, #060d5e, #002268);

}

Sehen Sie die Wirkung:

So ähnlich ist es ein bisschen. Wenn Sie genau hinsehen, werden Sie natürlich feststellen, dass der Farbverlauf nicht von einer Farbe zu transparent endet, sondern Farbe A – transparent – ​​Farbe B. Auf diese Weise wird die andere Hälfte der Lichtquelle nicht so abrupt sein. Der geänderte CSS-Code lautet:

div {
    Breite: 1000px;
    Höhe: 600px;
    Hintergrund:
        Kegelförmiger Gradient(
            von -45 Grad bei 400px 300px,
            hsla (170 Grad, 100 %, 70 %, 0,7),
            transparent 50%,
            hsla (219 Grad, 90 %, 80 %, .5) 100 %),
            linearer Farbverlauf (-45 Grad, #060d5e, #002268);
}

Um ein besseres Aussehen zu erzielen, haben wir am Ende des Winkelverlaufs eine zusätzliche Farbe hinzugefügt:

Emm, hier werden wir feststellen, dass der Winkelgradient conic-gradient() allein nicht ausreicht, er kann den Effekt des Lichtquellenschattens nicht simulieren, daher müssen andere Eigenschaften verwendet werden, um den Effekt des Lichtquellenschattens zu erzielen.

Hier denken wir natürlich an Box-Shadow. Hier ist ein Trick, um mit mehreren Kastenschatten den Effekt von Neonlichtern zu erzielen.

Fügen wir ein weiteres Div hinzu, um den Schatten der Lichtquelle zu realisieren:

<div Klasse="Schatten"></div>

.Schatten {
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: #fff;
    Kastenschatten: 
        0px 0,5px hsla (170 Grad, 95 %, 80 %, 1),
        0px 0 1px hsla (170 Grad, 91 %, 80 %, 0,95),
        0px 0 2px hsla (171 Grad, 91 %, 80 %, 0,95),
        0px 0 3px hsla (171 Grad, 91 %, 80 %, 0,95),
        0px 0 4px hsla (171 Grad, 91 %, 82 %, .9),
        0px 0 5px hsla (172 Grad, 91 %, 82 %, .9),
        0px 0 10px hsla (173 Grad, 91 %, 84 %, .9),
        0px 0 20px hsla (174 Grad, 91 %, 86 %, 0,85),
        0px 0 40px hsla (175 Grad, 91 %, 86 %, 0,85),
        0px 0 60px hsla (175 Grad, 91 %, 86 %, 0,85);
} 

OK, wir haben das Licht, aber das Problem ist, dass wir das Licht nur von einer Seite brauchen. Was sollen wir tun? Es gibt viele Möglichkeiten zum Zuschneiden. Hier stelle ich eine Methode vor, mit der man mit Clip-Pfad jeden Bereich eines Elements zuschneiden kann:

.Schatten {
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: #fff;
    Kastenschatten: .....;
    Clip-Pfad: Polygon (-100 % 100 %, 200 % 100 %, 200 % 500 %, -100 % 500 %);
}

Das Prinzip ist folgendes:

Auf diese Weise erhalten wir das Licht auf einer Seite:

Hier bietet CSS tatsächlich eine Möglichkeit, einseitige Schatten zu erzielen, der tatsächliche Effekt ist jedoch nicht gut, sodass schließlich die obige Lösung übernommen wurde.

Als nächstes können wir den oben erwähnten einseitigen Licht- und Winkelgradienten durch Positionieren, Drehen usw. überlagern und den folgenden Effekt erzielen:

Jetzt sieht es ziemlich ähnlich aus. Als nächstes muss das gesamte Muster bewegt werden. Hier gibt es viele Techniken. Der Kern besteht darin, CSS @Property zu verwenden, um die Winkelgradientenanimation zu realisieren und die Lichtanimation und den Winkelgradienten überlappen zu lassen.

Wir müssen CSS @Property verwenden, um den Codegradienten zu transformieren. Der Kerncode lautet wie folgt:

<div Klasse="wrap">
    <div Klasse="Schatten"></div>
</div>

@Eigenschaft --xPunkt {
  Syntax: '<Länge>';
  erbt: falsch;
  Anfangswert: 400px;
}
@property --yPunkt {
  Syntax: '<Länge>';
  erbt: falsch;
  Anfangswert: 300px;
}

.wickeln {
    Position: relativ;
    Rand: automatisch;
    Breite: 1000px;
    Höhe: 600px;
    Hintergrund:
        Kegelförmiger Gradient(
            von -45 Grad bei var(--xPoint) var(--yPoint),
            hsla (170 Grad, 100 %, 70 %, 0,7),
            transparent 50%,
            hsla (219 Grad, 90 %, 80 %, .5) 100 %),
            linearer Farbverlauf (-45 Grad, #060d5e, #002268);
    Animation: Punktbewegung, 2,5 s, unendlich, abwechselnd, linear;
}

.Schatten {
    Position: absolut;
    oben: -300px;
    links: -330px;
    Breite: 430px;
    Höhe: 300px;
    Hintergrund: #fff;
    Transform-Ursprung: 100 % 100 %;
    transformieren: drehen (225 Grad);
    Clip-Pfad: Polygon (-100 % 100 %, 200 % 100 %, 200 % 500 %, -100 % 500 %);
    box-shadow: ... hier wird viel Schattencode weggelassen;
    Animation: Maßstab 2,5 s, unendlich, alternativ, linear;
}
 
@keyframes skalieren {
    50 %,
    100 % {
        transformieren: drehen (225 Grad) skalieren (0);
    }
}

@keyframes PunktBewegung {
    100 % {
        --xPunkt: 100px;
        --yPunkt: 0;
    }
}

Auf diese Weise haben wir eine komplette Lichtanimation erreicht:

Sehen wir uns die Schritte zum Erstellen einer solchen Animation noch einmal an:

1. Mit dem Kegelschnitt-Farbverlauf wird das Grundgerüst erstellt. Auch hier kommen mehrere Farbverläufe zum Einsatz, wobei hinter dem Kegelschnitt-Farbverlauf ein dunkler Hintergrund liegt.
2. Verwenden mehrerer Box-Shadows zum Erzielen von Licht- und Schatteneffekten (auch als Neon-Effekt bekannt)
3. Verwenden Sie den Clip-Pfad, um einen beliebigen Bereich eines Elements auszuschneiden
4. Verwenden von CSS @Property zum Erzielen eines Verlaufsanimationseffekts

Die verbleibende Arbeit besteht darin, die obigen Schritte zu wiederholen, weitere Farbverläufe und Lichtquellen hinzuzufügen und die Animation zu debuggen. Schließlich können wir einen einfachen Simulationseffekt wie diesen erzielen:

Da der Originaleffekt .mp4 ist, ist es unmöglich, die genauen Farb- und Schattenparameter zu erhalten. Die Farbe wird direkt aus der Farbpalette übernommen und der Schatten wird eher beiläufig simuliert. Wenn eine Quelldatei und genaue Parameter vorhanden sind, kann die Simulation realistischer sein.

Den vollständigen Code finden Sie hier: CodePen – iPhone 13 Pro Gradient

endlich

Dieser Artikel ist eher zum Spaß gedacht. In der Praxis muss es elegantere Lösungen geben, um die oben genannten Effekte zu erzeugen, und es sollte bessere Möglichkeiten geben, sie mit CSS zu simulieren. Hier werfe ich nur ein paar Ideen in den Raum. Einige der Techniken 1, 2, 3 und 4 im Prozess sind es wert, gelernt zu werden.

Oben finden Sie Einzelheiten zur Verwendung von CSS-Farbverläufen zur Erzielung einer erweiterten Hintergrundlichtanimation. Weitere Informationen zur CSS-Farbverlaufshintergrundanimation finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!