Emoji de fusée

Ceci est une soumission pour Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

Cette soumission a été inspirée par la célébration du succès des gens sur un chat. Un emoji lié à l’espace utilisé pour reconnaître leurs victoires est l’emoji fusée.

Démo

Voyage

Ce défi a fourni une excellente expérience d’apprentissage. La tâche consistait à créer un emoji de fusée en utilisant CSS et HTML, ce qui impliquait de créer des formes qui ne sont généralement pas vues sur les sites Web.
J'ai commencé par diviser l'image en 8 parties :

1. Corps
2. Cône de nez
3. Fenêtre
4. Aileron gauche
5. Nageoire moyenne
6. Aileron droit
7. Buse
8. Flamme

Le Corps est un élément div qui pivote de 45 degrés avec un rayon de bordure ajouté à chaque coin pour lui donner une apparence arrondie. Cet élément contient le Nose Cone et la Fenêtre. Le Nose Cone est un élément div avec un rayon de bordure de 50 %, ce qui en fait un cercle. Il est positionné en haut du Corps. La Fenêtre est similaire au Cône de nez mais elle a une bordure pour lui donner un cadre de fenêtre et elle est positionnée près du centre du Corps. Le Left Fin est un élément div avec un attribut clip-path. En utilisant cet attribut, je peux définir un polygone, ce qui me permet de dessiner l'aileron. Le Middle Fin est un élément div aux coins arrondis. La Aileron Droit similaire à la Aileron Gauche mais elle est inversée. La Nozzle est un élément div rectangulaire aux coins arrondis. La Flamme est un élément div carré avec un rayon de bordure variable pour chaque coin. Une bordure avec une couleur plus foncée a été ajoutée à Flamme pour lui donner davantage l'apparence d'une flamme. Une animation a été ajoutée à Flame qui change simplement la taille et l'opacité toutes les 2 secondes indéfiniment. L'arrière-plan est une série d'attributs de dégradé radial utilisés pour créer des cercles blancs aléatoires de différentes tailles à différents endroits.

J'ai appris quelques nouvelles techniques CSS, notamment comment créer des animations et des polygones. À l'avenir, j'espère ajouter encore plus d'animations à la fusée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!