The Solar System in CSS

PHPz
Release: 2024-08-26 06:31:02
Original
805 people have browsed it

The Solar System has been done in CSSa lotof times — just search Codepen! So why do it again?

Because things get better and simpler — and we can now do aresponsivesolar system with just a few lines of CSS.

Let's start with some very basic markup:

Copy after login

We use anordered list, because the planets are in order.

Next, we unset the default

    -styles, and style it as a grid:

    ol { all: unset; aspect-ratio: 1 / 1; container-type: inline-size; display: grid; width: 100%; }
    Copy after login

    Now, for the planet trajectories, we're going to use a "grid stack". Instead of position: absolute, and a bunch of translations, we can simplystackall the grid items with:

    li { grid-area: 1 / -1; place-self: center; }
    Copy after login

    By setting a --d-variable (for diameter) per planet, using width: var(--d);, we get:

    The Solar System in CSS

    Cool! Let's add the planets using an ::after pseudo-element:

    li::after { aspect-ratio: 1 / 1; background: var(--b); border-radius: 50%; content: ''; display: block; width: var(--w, 2cqi); }
    Copy after login

    Let's ask ChatGPT to generate some nice radial-gradents for each planet — and while we're at it, let's tell it we're creating the Solar System and ask for planetary sizes between 1 and 6cqi — notcompletelyaccurate, but still maintaining a sizeable, recognizable difference:

    .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; }
    Copy after login

    And now we have:

    The Solar System in CSS

    Toanimatethe planets with different trajectory speeds, we add:

    li::after { /* previous styles */ animation: rotate var(--t, 3s) linear infinite; offset-path: content-box; }
    Copy after login

    Notice the offset-path. That's thekeyto simplifying the trajectory-animations, because all we have to do to move the planet along the shape of the

  1. is this:

    @keyframes rotate { to { offset-distance: 100%; } }
    Copy after login

    And that's all! I asked ChatGPT to calculate the timings based on "Neptune", with a rotation-speed of 20s — and we get:


    Conclusion

    With just a few rules, we created a simple 2d version of the Solar System in pure CSS. If you want to dive deeper, you can:

    • use real distances and sizes (with calc())
    • add a transform: rotateX(angle) to the
        to make it pseudo-3D:

      The Solar System in CSS

      ... and maybe use matrix3d to "re-flatten" the planets?

      Happy coding!

      The above is the detailed content of The Solar System in CSS. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!