Raketen-Emoji

Dies ist eine Einreichung für Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

Dieser Beitrag wurde durch die Feier des Erfolgs von Menschen in einem Chat inspiriert. Ein weltraumbezogenes Emoji, das zur Anerkennung ihrer Siege verwendet wird, ist das Raketen-Emoji.

Demo

Reise

Diese Herausforderung bot eine hervorragende Lernerfahrung. Die Aufgabe bestand darin, mithilfe von CSS und HTML ein Raketen-Emoji zu erstellen, wobei Formen erstellt wurden, die normalerweise nicht auf Websites zu sehen sind.
Ich begann damit, das Bild in 8 Teile zu zerlegen:

1. Körper
2. Nasenkegel
3. Fenster
4. Linke Flosse
5. Mittelflosse
6. Rechte Flosse
7. Düse
8. Flamme

Der Body ist ein div-Element, das um 45 Grad gedreht wird, wobei an jeder Ecke ein Randradius hinzugefügt wird, um ihm ein abgerundetes Aussehen zu verleihen. Dieses Element enthält den Nasenkegel und das Fenster. Der Nasenkegel ist ein Div-Element mit einem Randradius von 50 %, was ihn zu einem Kreis macht. Es befindet sich oben am Körper. Das Fenster ähnelt dem Nasenkegel, hat jedoch einen Rand, der ihm einen Fensterrahmen verleiht, und ist nahe der Mitte des Körpers positioniert. Das Left Fin ist ein div-Element mit einem Clip-Pfad-Attribut. Mit diesem Attribut kann ich ein Polygon definieren, mit dem ich die Flosse zeichnen kann. Die Mittelflosse ist ein div-Element mit abgerundeten Ecken. Die Rechte Flosse ähnelt der Linken Flosse, ist jedoch umgekehrt. Die Düse ist ein rechteckiges Div-Element mit abgerundeten Ecken. Die Flamme ist ein quadratisches Div-Element mit unterschiedlichem Randradius für jede Ecke. Ein Rand mit einer tieferen Farbe wurde zu Flamme hinzugefügt, um ihm ein eher flammenartiges Aussehen zu verleihen. Flamme wurde eine Animation hinzugefügt, die einfach alle 2 Sekunden die Größe und Deckkraft auf unbestimmte Zeit ändert. Der Hintergrund besteht aus einer Reihe radial verlaufender Attribute, mit denen zufällige weiße Kreise unterschiedlicher Größe an verschiedenen Stellen erstellt werden.

Ich habe einige neue CSS-Techniken gelernt, darunter das Erstellen von Animationen und Polygonen. Ich hoffe, der Rakete in Zukunft noch mehr Animationen hinzufügen zu können.

Das obige ist der detaillierte Inhalt vonRaketen-Emoji. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!