Maison> interface Web> tutoriel CSS> le corps du texte

Le système solaire en CSS

PHPz
Libérer: 2024-08-26 06:31:02
original
776 Les gens l'ont consulté

Le système solaire a été réalisé en CSSbeaucoupde fois — il suffit de rechercher Codepen ! Alors pourquoi recommencer ?

Parce que les choses s'améliorent et sont plus simples — et que nous pouvons désormais créer un système solaireresponsiveavec seulement quelques lignes de CSS.

Commençons par un balisage très basique :

Copier après la connexion

Nous utilisons uneliste ordonnée, car les planètes sont dans l'ordre.

Ensuite, nous supprimons les styles

    par défaut et les stylisons sous forme de grille :

    ol { all: unset; aspect-ratio: 1 / 1; container-type: inline-size; display: grid; width: 100%; }
    Copier après la connexion

    Maintenant, pour les trajectoires des planètes, nous allons utiliser une "grid stack". Au lieu de position : absolue, et un tas de traductions, nous pouvons simplementempilertous les éléments de la grille avec :

    li { grid-area: 1 / -1; place-self: center; }
    Copier après la connexion

    En définissant une variable --d (pour le diamètre) par planète, en utilisant width: var(--d);, nous obtenons :

    The Solar System in CSS

    Cool ! Ajoutons les planètes en utilisant un pseudo-élément ::after :

    li::after { aspect-ratio: 1 / 1; background: var(--b); border-radius: 50%; content: ''; display: block; width: var(--w, 2cqi); }
    Copier après la connexion

    Demandons à ChatGPT de générer de jolis gradients radiaux pour chaque planète – et pendant que nous y sommes, disons que nous créons le système solaire et demandons des tailles planétaires comprises entre 1 et 6cqi – pascomplètementprécis, mais conservant toujours une différence importante et reconnaissable :

    .mercury { --b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%); --w: 2.0526cqi; } .venus { --b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%); --w: 2.6053cqi; } .earth { --b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%); --w: 3.1579cqi; } .mars { --b: radial-gradient(circle, #e57373 0%, #af4448 100%); --w: 3.7105cqi; } .jupiter { --b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%); --w: 4.8158cqi; } .saturn { --b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%); --w: 5.3684cqi; } .uranus { --b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%); --w: 4.2632cqi; } .neptune { --b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%); --w: 6cqi; }
    Copier après la connexion

    Et maintenant nous avons :

    The Solar System in CSS

    Pouranimerles planètes avec des vitesses de trajectoire différentes, on ajoute :

    li::after { /* previous styles */ animation: rotate var(--t, 3s) linear infinite; offset-path: content-box; }
    Copier après la connexion

    Remarquez le chemin de décalage. C'est laclépour simplifier les animations de trajectoire, car tout ce que nous avons à faire pour déplacer la planète le long de la forme du

  1. c'est ça :

    @keyframes rotate { to { offset-distance: 100%; } }
    Copier après la connexion

    Et c'est tout ! J'ai demandé à ChatGPT de calculer les timings basés sur "Neptune", avec une vitesse de rotation de 20 s — et nous obtenons :


    Conclusion

    Avec seulement quelques règles, nous avons créé une version simple en 2D du système solaire en CSS pur. Si vous souhaitez approfondir, vous pouvez :

    • utiliser des distances et des tailles réelles (avec calc())
    • ajouter une transformation : rotateX(angle) au
        pour le rendre pseudo-3D :

      The Solar System in CSS

      ... et peut-être utiliser Matrix3D pour "réaplatir" les planètes ?

      Bon codage !

      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!

source:dev.to
Déclaration de ce site Web
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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!