Mit CSS3 wird ein Kegelschnitt-Gradienteneffekt erzielt

Grammatik:

Hintergrundbild: Kegelschnitt-Farbverlauf (vom Winkel an Position, Startfarbe, ..., letzte Farbe)

Erster Parameter:

von Winkel: Startwinkel, optional, Standard ist von oben nach unten

Position: die Position der Kegelspitze

Zweiter Parameter:

start-color : definiert die Startfarbe

stop-color : definiert die Endfarbe

1. Der erste Parameter

Ebenso kann der erste Parameter leer sein, der Standardwinkel beträgt 0 Grad und der Kegelmittelpunkt ist der Mittelpunkt der Form. Zum Beispiel:

Hintergrundbild: konischer Farbverlauf (#69f, #fd44ff); 

Wir können den Startwinkel beispielsweise ändern:

Hintergrundbild: konischer Farbverlauf (von -90 Grad, Nr. 69f, Nr. d44ff); 

Ändern Sie die Position des Kegelmittelpunkts:

Hintergrundbild: Kegelförmiger Farbverlauf (von -90 Grad bei 80 x 120 Pixel, #69f, #fd44ff) 

2. Der zweite Parameter

Wie bei linearen und radialen Farbverläufen können Sie die Farbe und die Startposition des Farbverlaufs festlegen. Die akzeptierten Positionsparameter sind Prozentsatz und Winkel. Zum Beispiel:

Hintergrundbild: konischer Farbverlauf (#69f 10 %, #fd44ff 10 %);

Der obige Code entspricht:

Hintergrundbild: konischer Farbverlauf (#69f 36 Grad, #fd44ff 36 Grad);

Der Anzeigeeffekt ist wie folgt:

3. Wiederholen Sie den Kegelverlauf

Wie lineare und radiale Farbverläufe haben auch konische Farbverläufe die Eigenschaft, sich zu wiederholen.

Hintergrundbild: sich wiederholender konischer Farbverlauf (#69f 0 36 Grad, #fd44ff 36 Grad 72 Grad);

Der Effekt ist wie unten dargestellt:

Kommt Ihnen diese Darstellung bekannt vor?

Machen wir daraus einen Kreis und fügen einen Knopf hinzu, dann wird daraus eine Lottoscheibe.

Die Wirkung ist wie folgt:

Adresse: https://codepen.io/jianxiujiucan/pen/bGddbez

Mit Kegeln können wir unterschiedliche Ladeeffekte erzielen:

Adresse: https://codepen.io/jianxiujiucan/pen/bGdGyKN

Für die zweite Ladung lerne es bitte selbst und schreibe einige Übungen ~

Mit Farbverläufen können wir unterschiedliche Effekte erzielen.

Zusammenfassen

Oben finden Sie eine Einführung des Herausgebers zum Kegelschnitteffekt, der mit CSS3 erzielt wird. Ich hoffe, es wird für alle hilfreich sein!