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

Here, I wish everyone a happy Mid-Autumn Festival in advance!!

I wish you all a beautiful Mid-Autumn Festival, can not meet the bug; Snag a ticket home; Spend time with your girlfriend; Spend time with family; Eat moon cake!!

For this Mid-Autumn festival idea I think I am also racking my brains, see the Mid-Autumn festival idea topic, I looked at Python drawing, not, and look at crawler, not work (disorderly climb I heard will be invited to drink coffee).

Front-end page production, I have not written a few 😂, the more see the more uncomfortable ah, no what can and I pull on the relationship.

Finally there is no way out, honestly review CSS animation, tune, color collocation, turn over various websites. Finish or let a person quite happy 😀

The final results are as follows:

This simple page to a large extent or restore my mind, some creative points can not be realized, Baidu do not know what keywords to search 😂, the deficiency is that the night sky with tone not out of their own satisfaction.

Code demo can be viewed in my CodePen: CSS Chang ‘e to the moon

🚀, structure,

The main body of the page structure is roughly divided into the following points:

  1. The moon
  2. A shooting star
  3. Twinkling stars everywhere
  4. Moving Chang ‘e

Once the idea is clear, it’s really easy.

🛸, HTML

HTML is very simple, just three divs with one image.

<div class="container">
    <div class="moon"></div>
    <div class="change">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2afd3835f284892b3691681d0bb6d06~tplv-k3u1fbpfcp-zoom-1.image" 
        class="ico" 
        style="border: none;  width: 50px;height: 50px;">
    </div>
</div>
Copy the code

🚢, page background

The main reason is that the background color is difficult to adjust. At the beginning, I took THE QQ screenshot to take the color of the starry sky photo, but the results were not satisfactory. I also looked at many color matching websites, but I could not find a suitable tone.

This final background color, is slowly adjusted out, said many are tears. The front end is really not easy.

* {
    margin: 0;
    padding: 0;
}
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #01050D;
}
Copy the code

🚁, moon

The moon animation is pretty simple, with so many frames to make it look smoother. It is also the same in the heart of the beautiful color can not be adjusted, and finally took this color. In the mind originally wanted to be able to make a little bit of blue and silver that tone, but also hope to make texture, but not fine, or can not make it.

.moon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(219.207.175);
    box-shadow: 0 0 60px #F5FFFA;
    position: absolute;
    left: 80%;
    top: 140px;
    animation: myMoon 3s linear;
}
@keyframes myMoon {
    0% {
        left: 78%;
        top: 130px;
        opacity: 0;
    }
    10% {
        left: 78.2%;
        top: 131px;
        opacity: 0.1;
    }
    20% {
        left: 78.4%;
        top: 132px;
        opacity: 0.2;
    }
    30% {
        left: 78.6%;
        top: 133px;
        opacity: 0.3;
    }
    40% {
        left: 78.8%;
        top: 134px;
        opacity: 0.4;
    }
    50% {
        left: 79%;
        top: 135px;
        opacity: 0.5;
    }
    60% {
        left: 79.2%;
        top: 136px;
        opacity: 0.6;
    }

    70% {
        left: 79.4%;
        top: 137px;
        opacity: 0.7;
    }
    80% {
        left: 79.6%;
        top: 138px;
        opacity: 0.8;
    }
    90% {
        left: 79.8%;
        top: 139px;
        opacity: 0.9;
    }
    100% {
        left: 80%;
        top: 140px;
        opacity: 1; }}Copy the code

🏍, a shooting star

The generation is done using simple javascript code, with the focus on CSS animation code.

<script>
// Generate random meteors
for (var i = 0; i < 20; i++) {
    var lx = document.createElement('div')
    lx.className = 'meteor'
    lx.style.right = (Math.random() * 400 + 150) + 'px'
    lx.style.top = (Math.random() * 200 + 100) + 'px'
    lx.style.animationDelay = Math.random() * 3 * i + 's' // Add animation delay time
    document.body.appendChild(lx)
}
</script>
Copy the code

Animation effects

Meteor CSS code

.meteor {
    width: 1px;
    display: block;
    position: absolute;
    background-color: transparent transparent transparent rgba(255.255.255.5);
    opacity: 0;
    animation: meteor 4s linear infinite;
}

.meteor::after {
    content: ' ';
    display: block;
    border: 1px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255.255.255.5);
    transform: rotate(-45deg);
}

@keyframes meteor {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-500px.300px); }}Copy the code

🏎, twinkling stars everywhere

Same as above.

<script>
var width = document.body.clientWidth - 20;
var height = document.body.clientHeight - 20;
// Randomly generate stars
for (var i = 0; i < 30; i++) {
    var img = document.createElement('div')
    img.className = 'star'
    img.style.left = Math.random() * width + 'px'
    img.style.top = Math.random() * height + 'px'
    img.style.animationDelay = Math.random() * 3 * i + 's' // Add animation delay time
    document.body.appendChild(img)
}
</script>
Copy the code

Same thing. 😁

.star {
    position: absolute;
}
.star::before {
    content: "★";
    display: block;
    position: absolute;
    left: 10px;
    top: 20px;
    width: auto;
    height: auto;
    color: #fff;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-animation: 1s starlight linear infinite;
    -moz-animation: 1s starlight linear infinite;
    animation: 1s starlight linear infinite;
    -webkit-animation-fill-mode: forwards -moz-animation-fill-mode forwards animation-fill-mode forwards
}

.star::after {
    content: "★";
    display: block;
    position: absolute;
    left: 40px;
    top: 120px;
    width: auto;
    height: auto;
    color: #fff;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-animation: 2s starlight linear infinite;
    -moz-animation: 2s starlight linear infinite;
    animation: 2s starlight linear infinite;
}
@-webkit-keyframes starlight {
    0% {
        -webkit-transform: scale(0.5);
    }

    50% {
        -webkit-transform: scale(0.3);
    }
    100% {
        -webkit-transform: scale(0.1); }}@-moz-keyframes starlight {
    0% {
        -moz-transform: scale(0.5);
    }

    50% {
        -moz-transform: scale(0.3);
    }
    100% {
        -moz-transform: scale(0.1); }}@keyframes starlight {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.3);
    }
    100% {
        opacity: 0;
        transform: scale(0.1); }}Copy the code

🚝, the goddess of the moon

This chang ‘e animation may be the most simple to write, the original heart still have some creative, but not quite, can not come out.

Can only stay next week, next time to consult some big guy, help me realize the idea in the heart.

.change {
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    left: 81.8%;
    top: 169px;
    animation: myChange 8s linear;
}

@keyframes myChange {
    0% {
        left: 41.8%;
        top: 669px;
        opacity: 0;
    }
    1% {
        left: 42.8%;
        top: 629px;
        opacity: 0;
    }
    10% {
        left: 45.8%;
        top: 619px;
        opacity: 0.1;
    }

    20% {
        left: 49.8%;
        top: 569px;
        opacity: 0.2;
    }
    30% {
        left: 53.8%;
        top: 519px;
        opacity: 0.3;
    }
    40% {
        left: 57.8%;
        top: 469px;
        opacity: 0.4;
    }
    50% {
        left: 61.8%;
        top: 419px;
        opacity: 0.5;
    }
    60% {
        left: 65.8%;
        top: 369px;
        opacity: 0.6;
    }

    70% {
        left: 69.8%;
        top: 319px;
        opacity: 0.7;
    }

    80% {
        left: 73.8%;
        top: 269px;
        opacity: 0.8;
    }

    90% {
        left: 77.8%;
        top: 219px;
        opacity: 0.9;
    }
    100% {
        left: 81.8%;
        top: 169px;
        opacity: 1; }}Copy the code

A small picture of Chang ‘e:

🪂,

Although the content of this small goddess of the Moon is not much, but because I didn’t spend the idea at the front end, so a lot of things are written while checking.

Here I use some of the tools to share with you ha 😁

W3C School reviews CSS animations

RGB color values and hexadecimal color codes interconvert to A Single Div A creative Div project

Palettes | Flat UI Colors 🎨 280 handpicked Colors ready for COPY & PASTE color collocation

Paletton – The Color Scheme Designer

Seeseed has endless design possibilities

Smart online matting for free download

SVG Animation Trajectory

Add: After drawing SVG, press CTRL+U to view the path

My favorite site is Seeseed. I usually look for pictures, fonts, color matching, tools and inspiration, but I also come here most of the time. The aesthetic is very comfortable, there is no advertisement, and there are recommended websites or communities.

Our gold digger is to grow handsome, talk nice again, I think everybody big guy reward a praise should no problem, I want to get an excellent article award ha 👨💻🚀