Beispiel für die Verwendung von CSS3 Linear-Gradient, um einen Hüllkurveneffekt bei der Auswahl der Warenkorbadresse zu erzielen

Sie müssen mit den CSS3-Gradienten-Frontend-Kinderschuhen vertraut sein. Auf einigen E-Commerce-Websites wird die Adressauswahl zur Verschönerung in einen Briefumschlagstil umgewandelt (ich persönlich finde, dass es sehr langweilig ist ~). Nachdem ich mir die Implementierung angesehen habe, basieren die meisten davon auf In Form von Bildern , mit einer Optimierungsmentalität versuche ich, den Hüllkurveneffekt mit CSS3 zu erzielen >

Lass uns anfangen~

Die HTML-Struktur ist wie folgt:

> Höhe: 176px;
Höhe: 100%; .
Als nächstes schreiben wir den Farbverlauf für den Briefkasten. Zuerst analysieren wir den Farbverlauf über dem Bild. Es gibt tatsächlich drei Farben: Weiß, Rot und Blau. Wir alle wissen, dass wir bei der Verwendung eines linearen Farbverlaufs zusätzlich zum Anfangswinkel des Farbverlaufs auch die Farbe und den Farbanteil definieren müssen. Wir kennen die Farbe bereits, also lassen Sie uns jetzt darüber sprechen, wie das geht Bestimmen Sie dieses Verhältnis.

Wenn wir die Darstellungen betrachten, können wir das Muster aus einem Rot, einem Weiß, einem Blau und einem Weiß als

Zyklus

finden, dann ist unsere Musternummer 4 und unser Anteil ist 100 %/ (Unsere reguläre Zahl * 2) = 12,5 % ist unser Verhältnis. Erklären Sie, warum wir unsere reguläre Zahl * 2 verwenden. Sollte es nicht sein, dass die reguläre Zahl eine Kombination ist? NEIN! Um das Verständnis für alle zu erleichtern, habe ich eine Darstellung erstellt.

Dies sollte sehr intuitiv sein as Einfach in kleinen Würfeleinheiten wiederholen .letter-box{
width: 278px;
height: 176px;
padding: 5px;
box-sizing : border-box;
Hintergrund: linear-gradient(45deg,#f25953 12,5%,#fbfaf5 12,5%,#fbfaf5 25%,#5590d6 25%,#5590d6 37,5%,#fbfaf5 37,5%,#fbfaf5 50%, #f25953 50% , #f25953 62,5 %, #fbfaf5 62,5 %, #fbfaf5 75 %, #5590d6 75 %, #5590d6 87,5 %, #fbfaf5 87,5 %, #fbfaf5 100 %); Bodengröße
: 70px 70px; }

Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung von CSS3 Linear-Gradient, um einen Hüllkurveneffekt bei der Auswahl der Warenkorbadresse zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!