Implementierung des Übergangseffekts für konkave Rechtecke mit linearem Farbverlauf in CSS

In diesem Artikel werden die Schwierigkeiten und Ideen des Übergangseffekts eines linearen konkaven Rechtecks ​​mit Farbverlauf erläutert. Er stellt hauptsächlich die Implementierung eines konkaven Rechtecks, das Hinzufügen eines linearen Farbverlaufs zu einem konkaven Rechteck und den Übergang der Hintergrundfarbe eines linearen Farbverlaufs vor. Wenn Sie eine bessere Implementierungslösung haben, diskutieren Sie diese gerne mit mir im Kommentarbereich.

Über

Implementieren eines konkaven Rechtecks

Die Inspiration für die Implementierung dieses Stils stammt aus einem Artikel im Internet, der CSS verwendet, um konkave Ecken zu erzielen. Er beschreibt, wie der konkave Eckeneffekt von Chrome-Tabs erzielt wird, und zwar ungefähr wie folgt:

Verwenden Sie dazu radial-gradient Farbverlauf. Reduzieren Sie die Unschärfedistanz des Farbverlaufs auf 0, um eine klare kreisförmige Grenze zu sehen. Wenn wir dieser Idee folgen, können wir den Stil eines konkaven Rechtecks ​​erreichen. Indem wir position des Farbverlaufs anpassen, steuern wir die Position des Mittelpunkts und indem wir die Größe des radialen Kreises anpassen, steuern wir die Krümmung der konkaven Oberfläche, wie unten gezeigt:

Sie können es in der Radialgradient-Demo auf MDN debuggen:

Hintergrund: radialer Farbverlauf (300px 300px bei 112px 0, #eee 75 %, #333 75 %);

Kleine Details

1. Wenn die Unschärfedistanz des radialen Farbverlaufs 0 beträgt, sehen Sie deutlich gezackte Kanten am kreisförmigen Rand. Eine Erhöhung der Unschärfedistanz um 1 Pixel kann die gezackten Kanten beseitigen. (Ist das das legendäre Anti-Aliasing?)
2. Android 4.4.4 ist nicht mit radialen Farbverläufen kompatibel.

Konkaves Rechteck mit linearem Farbverlauf

Im vorherigen Abschnitt haben wir ein konkaves Rechteck implementiert. Wie legen wir nun einen linearen Farbverlauf für das konkave Rechteck fest? Der Hintergrund wird bereits verwendet. Sie können nicht sowohl radiale als auch lineare Farbverläufe festlegen.

Sie können mask-image verwenden, um den Effekt des Ausschneidens des Bildes zu erzielen. Hier ist ein Beispiel von MDN:

Das MDN-Beispiel verwendet ein fünfzackiges Stern-SVG, um einen grünen fünfzackigen Stern auf einem grünen Hintergrund auszuschneiden. Um ein konkaves Rechteck mit Farbverlauf zu erhalten, können Sie eine konkave Rechteckform verwenden, um einen linearen Hintergrund mit Farbverlauf auszuschneiden.

Verwenden Sie mask-image , um die Form und background für den linearen Farbverlauf festzulegen:

.xxx {
  Hintergrund: linearer Farbverlauf (115 Grad, #ff66ff, #4db8ff);
  Maskenbild: radialer Farbverlauf (300px 300px bei 112px 0, rgba (255, 255, 255, 0) 75 %, #333 75 %);
}

Wirkung:

Kleine Details

Mask-Image ist auf Mobilgeräten kompatibler als Radial Gradient und wird von Android 4.4.4 unterstützt.

Farbverlauf im Hintergrund

Das Hintergrundbild selbst unterstützt keine Übergangsanimation, aber diese kann durch einige raffinierte Operationen erreicht werden. Der Artikel von Lehrer Zhang Xinxu erklärt dies ausführlich:

https://www.zhangxinxu.com/wordpress/2020/08/background-image-animation/

https://www.zhangxinxu.com/wordpress/2018/03/background-gradient-transtion/

Das Hintergrundbild unterstützt keine Übergangsanimation, die Deckkraft jedoch schon. Fügen Sie dem vorherigen konkaven Rechteck mit linearem Farbverlauf ein weiteres Pseudoelement hinzu, stellen Sie die Hintergrundfarbe des Pseudoelements auf eine andere lineare Farbverlaufsfarbe ein und steuern Sie dann die Deckkraft des Pseudoelements, um einen linearen Farbverlaufsübergangseffekt zu erzielen.

Damit ist dieser Artikel über die Implementierung des CSS-Effekts „linearer Farbverlauf, konkaves Rechteck“ abgeschlossen. Weitere relevante Inhalte zum CSS-Effekt „linearer Farbverlauf, konkaves Rechteck“ finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass alle 123WORDPRESS.COM in Zukunft unterstützen werden!