preface

Last [Mid Autumn Festival] realize the revolution of sun, earth and moon in pure CSS I dug a pit to simulate the revolution of the planets in the solar system around the sun. Today I'll fill the pit.

There are only eight planets in the solar system: Mercury, Venus, earth, Mars, Jupiter, Saturn, Uranus and Neptune. Originally there was Pluto, but because astronomers voted to remove Pluto from the planetary list at the 26th International Astronomical Union, it was classified as a dwarf planet.

I want to follow the concept of my ancestors, draw the sun and six planets, five elements of gold, wood, water, fire and earth, plus the sun and the earth as seven Yao 😎

In fact, the sun and moon are seven obsidian, but I don't draw the moon, because the moon is not a planet. It goes around the earth.

Although there is no moon, it is always right to look up at the stars on the Mid Autumn Festival.

	Sun sun	Mercury	Venus	Earth	Mars	Jupiter	Saturn
Ancient Chinese Name:	Golden flint	Mercury	Taibai	earth	bewilder	Year star	Saturn

To see the source code, click here: Solar System (codepen.io)

HTML

List frames:

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

<ul id="planet-list">
    <li id="sun-link">
        <h3>Golden flint</h3>
    </li>
    <li id="mercury-link">
        <h3>Mercury</h3>
    </li>
    <li id="venus-link">
        <h3>Taibai</h3>
    </li>
    <li id="earth-link">
        <h3>earth</h3>
    </li>
    <li id="mars-link">
        <h3>bewilder</h3>
    </li>
    <li id="jupiter-link">
        <h3>Year star</h3>
    </li>
    <li id="saturn-link">
        <h3>Saturn</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>

CSS

The key point is CSS: mainly the position of the planet and orbit, and the color from Chinese color I found some traditional colors on the.

Some of the content is mine Last article It has been mentioned that, in fact, the writing method in the previous article is better looking and easy to modify, but it's troublesome. People with a heart can change it.

Background and text

The Chinese part uses cursive script, which feels very good. Although some words are not familiar, if you are not used to it, you can change it into running script.

The background color is wild grape purple. Set the list casually.

@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;
}

star

Let's put two here, otherwise there's too much code. Calculate the position through calc(). Fine tune it yourself. You can see what you want to reproduce 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.3s;
}

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

track

Let's put two in the same place, Solar System (codepen.io)

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

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

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

animation

You can see that there are animation attributes in the above tracks:

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

You need @ keyframes to define the animation:

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

JS

When jquery is used, you need to import:

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

You can see the effect when you move the mouse over the planet name. The two functions are to restore the original when you move the mouse away:

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)"
        });
    }
);

summary

The front end is too difficult. I don't want to write the front end any more (no). The reference figure is as follows:

See here, please 👍

Welcome to pay attention to and communicate with each other. If you have any questions, you can comment and leave a message. I will reply!

I'm Mancuoj. More interesting articles: Mancuoj's personal home page