I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

preface

Pure CSS to achieve the revolution of the sun and the moon dug a pit – simulation of the planets around the sun, today I came to fill the pit.

The solar system now has only eight planets: Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus and Neptune. There used to be Pluto, but at the 26th International Astronomical Union, astronomers voted Pluto off the planet list and designated it a dwarf planet.

And I want to uphold the concept of ancestors to draw the sun and six planets, five elements of gold, wood, water, fire and earth, plus the sun and the earth for seven obsidian 😎

It’s actually the sun and the moon but I’m not going to draw the moon, because the moon is not a planet, it goes around the earth.

Although there is no moon, but Mid-Autumn Festival, look up at the stars is always right.

Solar System (codepen.io)

HTML

List the framework:

<h1 id="main-title">Mancuoj</h1>

<ul id="planet-list">
    <li id="sun-link">
        <h3>Jin Sui</h3>
    </li>
    <li id="mercury-link">
        <h3>stars</h3>
    </li>
    <li id="venus-link">
        <h3>The white</h3>
    </li>
    <li id="earth-link">
        <h3>The earth</h3>
    </li>
    <li id="mars-link">
        <h3>Mars</h3>
    </li>
    <li id="jupiter-link">
        <h3>Jupiter</h3>
    </li>
    <li id="saturn-link">
        <h3>ZhenXing</h3>
    </li>
</ul>

<div id="orbit-container">
    <div id="sun"></div>
    <div class="orbit" id="mercury-orbit">
        <div id="mercury"></div>
    </div>
    <div class="orbit" id="venus-orbit">
        <div id="venus"></div>
    </div>
    <div class="orbit" id="earth-orbit">
        <div id="earth"></div>
    </div>
    <div class="orbit" id="mars-orbit">
        <div id="mars"></div>
    </div>
    <div class="orbit" id="jupiter-orbit">
        <div id="jupiter"></div>
    </div>
    <div class="orbit" id="saturn-orbit">
        <div id="saturn"></div>
    </div>
</div>
Copy the code

CSS

The key is CSS: basically, the positions of planets and orbits, and some traditional colors from Chinese colors.

Some of the content of my last article has been mentioned, in fact, the kind of writing better look and easy to modify, but trouble, willing to change magic.

Background and text

The Chinese part uses cursive script, the feeling is very good-looking although some words are not familiar with, if not accustomed to can be changed into the regular script.

The background color will be wild grape purple.

@import url("https://fonts.googleapis.com/css2?family=Carattere&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Zhi+Mang+Xing&display=swap");

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: Carattere, sans-serif;
    list-style: none;
}

body.html {
    background-color: #495c69;
}

#planet-list {
    display: flex;
    justify-content: center;
}

#planet-list li h3 {
    /* font-family: 'Zhi Mang Xing', sans-serif; * /
    font-family: "Liu Jian Mao Cao", sans-serif;
    color: white;
    text-decoration: none;
    font-size: 45px;
    font-weight: lighter;
}
Copy the code

planet

Here put two, or too much code, through calc() to calculate the position, their own fine tuning, want to reproduce can see the source code.

#sun {
    position: absolute;
    top: calc(320px - 40px);
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    background: linear-gradient(#fcd670.#f2784b);
    border-radius: 100%;
    box-shadow: 0 0 8px 8px rgba(242.120.75.0.2);
    transition: 0.3 s;
}

#mercury {
    position: absolute;
    width: 3px;
    height: 3px;
    top: 74px;
    left: -4px;
    border-radius: 100%;
    background: linear-gradient(#f8f4ed.#e9ddb6);
}
Copy the code

orbital

Solar System (codepen.io)

/* orbit */
.orbit {
    position: absolute;
    border-radius: 100%;
    border: 3px solid rgba(137.196.244.0.1);
    transition: 0.2 s;
}

#mercury-orbit {
    top: 245px;
    left: calc(50% - 75px);
    width: 150px;
    height: 150px;
    animation: spin-right 1.2 s linear infinite;
}

#venus-orbit {
    width: 225px;
    height: 225px;
    top: 206px;
    left: calc(50% - 112.5 px.);
    animation: spin-right 3.08 s linear infinite;
}
Copy the code

animation

We can see that the above orbitals all have animation properties:

xxx {
    animation: spin-right 0.00 s linear infinite;
}
Copy the code

We need @keyframes to define our animation:

@keyframes spin-right {
    100% {
        transform: rotate(1turn); }}Copy the code

JS

With jquery, you need to import:

https:/ / cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
Copy the code

When you hover over the planet name, you can see the effect. Two functions are used to restore the planet when the mouse is removed:

const planets = ["mercury"."venus"."earth"."mars"."jupiter"."saturn"];

for (let planet of planets) {
    $(` #${planet}-link`).hover(
        function () {$(` #${planet}-orbit`).css({
                border: "Solid 3px RGBA (137, 196, 244, 0.4)"
            });
        },
        function () {$(` #${planet}-orbit`).css({
                border: "Solid 3px RGBA (137, 196, 244, 0.1)"}); }); } $("#sun-link").hover(
    function () {$("#sun").css({
            "box-shadow": 0 0 10px 10px Rgba (242, 120, 75, 0.8)
        });
    },
    function () {$("#sun").css({
            "box-shadow": "0 0 8px 8px Rgba (242, 120, 75, 0.2)"}); });Copy the code

conclusion

The front end is so difficult that I don’t want to write a front end anymore (no).

See here, ask 👍

Welcome to pay attention to each other exchange, have a question can comment message I must return!

I am Mancuoj, more interesting articles: Mancuoj personal homepage