Maison  >  Article  >  interface Web  >  Défi frontend : espace.

Défi frontend : espace.

DDD
DDDoriginal
2024-09-14 06:18:32190parcourir

Frontend Challenge: Space.

Je travaille toujours là-dessus, mais je voulais essayer de construire en public. La fenêtre Codepen coupe des parties de l'image, alors cliquez sur le bouton .5x.

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

Inspiration

Le défi était l'espace, j'ai donc commencé par l'arrière-plan de l'espace. Je ne voulais pas de noir pur, alors j'ai joué avec un fond noir, bleu et violet : dégradé linéaire. Je me suis retrouvé avec quelque chose de plus agréable que le noir #000.

Démo

Voici mon codepen. Je pourrai peut-être simplement publier le code ici lorsque j'aurai terminé.


La fenêtre Codepen coupe des parties de l'image, alors cliquez sur le bouton .5x.

Voyage

J'ai réutilisé du code du défi d'été où j'avais dessiné un coucher de soleil sur la plage. Le dégradé de couleurs au soleil m'a rappelé la tache rouge sur Jupiter.

J'ai ajouté un spot en jouant avec plus de couleurs. Je ne voulais pas faire le système solaire proprement dit et je voulais une version plus stylisée de l'espace. Au départ, je voulais que les planètes se chevauchent.

Quand j'ai créé la planète jaune, le blanc lui a donné plus de profondeur. j'ai donc ajouté un point culminant sur la planète semblable à Jupiter.

Ensuite, j'ai ajouté une ouverture de trou de ver qui permettait aux vaisseaux d'entrer dans la galaxie. Le trou de ver est un ovale avec transformation : biais pour donner de la profondeur au trou.

Conclure

J'aime beaucoup ces défis frontend. C'est toujours agréable de faire preuve d'un peu de créativité dans les projets.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn