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

The big guys show their magic, drawing the moon and animation is more beautiful than one, especially to learn about it, the relevant reference links stay at the bottom of the article.

Full moon tone

The moon appears at night, so naturally the background is black.

Let’s not talk about circles, a border-radius: 50% done.

The basic framework code is as follows:

<! DOCTYPEhtml>
<title>Only draw the moon</title>
<body>
    <div class="moon"></div>
</body>
<style>
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: black;
    }

    .moon {
        width: 200px;
        height: 200px;
        background: yellow;
        border-radius: 50%;
    }
</style>
</html>
Copy the code

The basic display effect is shown as follows:

Well, the initial effect looks very good, especially for my nearsightedness, the moon halo does not need to be added…

On the halo

Use box-shadow to add a shadow effect. Let’s try it out:

The box - shadow: x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color;Copy the code

After trying it out, we set a two-layer halo:

box-shadow: 0 0 30px 0px yellow, 0 0 100px 0 white;
Copy the code

The effect is shown below:

Let’s make the circle solid

The following strategies have been found:

Gradient background

For example, let’s set the background color of the moon to:

background-image: linear-gradient(
            45deg,
            lightyellow 0%,
            yellow 90%,
            yellow 100%
        );
Copy the code

The effect is as follows:

Add the line

From the big guy article, add curved lines:

.moon{// Other codeposition: relative;
}
.line {
        width: 100%;
        height: 100%;
        background-color: linear-gradient(
            45deg,
            lightyellow 0%,
            yellow 90%,
            yellow 100%
        );
        border: solid 5px white;
        border-radius: 50%;
        margin: -0.5 px.;
        position: absolute;
        box-sizing: border-box;
        transform: rotateY(45deg);
    }
    .line2 {
        width: 100%;
        height: 100%;
        background-color: linear-gradient(
            45deg,
            lightyellow 0%,
            yellow 90%,
            yellow 100%
        );
        border: solid 5px white;
        border-radius: 50%;
        margin: -0.5 px.;
        position: absolute;
        box-sizing: border-box;
        transform: rotateY(60deg);
    }

    .line3 {
        width: 100%;
        height: 100%;
        background-color: linear-gradient(
            45deg,
            lightyellow 0%,
            yellow 90%,
            yellow 100%
        );
        border: solid 5px white;
        border-radius: 50%;
        margin: -0.5 px.;
        position: absolute;
        box-sizing: border-box;
        transform: rotateY(75deg);
    }
Copy the code

rotating

We tried to spin the moon, and the effect was, well, a lot like the squashing of the Milky Way we saw before,

It looks like it’s going too far. I should have added a fixed circular background, or I should have rotated the lines like this. Well, not bad.

conclusion

The front end is a pair of glasses that trick people with code

Reference site article:

  1. The original 3D space planet trajectory is drawn like this

  2. Happy Mid-Autumn Festival, using CSS3 to achieve a small rocket 🚀 around the moon flight

  3. Pure CSS realizes the revolution of the sun, earth and moon