Heim >Web-Frontend >js-Tutorial >Reines JS und CSS realisieren Verlaufsfarben, einschließlich statischer Farbverläufe und dynamischer Farbverlaufs-_Javascript-Fähigkeiten

Reines JS und CSS realisieren Verlaufsfarben, einschließlich statischer Farbverläufe und dynamischer Farbverlaufs-_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:46:261422Durchsuche

Woran denken Sie, wenn Sie an „Farbverlauf“ denken?

Als ich anfing, nach diesem Begriff zu suchen, entdeckte ich, dass er tatsächlich zwei Bedeutungen bzw. zwei Formen hat: dynamischer Gradient und statischer Gradient.

Der sogenannte dynamische Farbverlauf ist ein einfaches Beispiel: Wenn er kommt, wird ihr Gesicht allmählich rot ... Allmählich ändert sich das, was sich allmählich ändert, und der statische Farbverlauf ist einfacher: Ein Regenbogen erscheint Himmel, Rot, Orange, Gelb, Grün, Blau, Lila ... Im aktuell angezeigten fertigen Produkt unterscheidet sich die Farbe von einem Teil zum anderen. Die Amplitude kann relativ klein sein und sich allmählich ändern, aber es gibt eine Sache ist entscheidend, sie existiert bereits, bildet den Status quo der Veränderung und kann nicht geändert werden.

Auf diese Weise implementieren wir zunächst den sogenannten dynamischen Farbverlauf. Aus dynamischen Gründen werde ich das Bild nicht kurz vorstellen:

* Dynamisch Farbverlauf

Code kopieren Der Code lautet wie folgt:

...






Für Um die Anzeige zu erleichtern, habe ich den Inline-Stil geschrieben. Es wird weiterhin empfohlen, den externen Link-Stil zu verwenden. Schreiben Sie einfach und erzielen Sie dynamisch den Verlaufseffekt:
Kopieren Sie Code Der Code lautet wie folgt: