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

preface

The Mid-Autumn Festival is coming, in addition to the moon, moon cakes, eat reunion dinner, we have the custom of bo cake. Off topic, back to this article, ancient myths and legends – Chang e moon, we all know that I will achieve a simple version of chang e moon, I wish you a happy Mid-Autumn Festival, also in line with the Mid-Autumn festival mood.

Simple analysis of the needs: need a bright moon in the night sky, need a beautiful chang ‘e, fly to the moon from far away.

Realize chang ‘e flying to the moon

Each part of the code is very simple, just need to use them together to a full moon effect.

Realize a full moon

This one is easy. Everybody draws a circle and gives it a yellow background. Take a container that has a length and width, set a bright background, and set rounded corners.

Effect:

Code:

<div class='moon'></div>
// css
 .moon {
    width: 500px;
    height: 500px;
    background: radial-gradient(rgb(196, 196, 60), rgb(240, 240, 9),           rgb(247, 247, 9));
    box-shadow: 0 0 40px 20px rgba(247, 247, 9, 0.5);
    border-radius: 250px;
    animation: yueliang 20s linear infinite;
  }
Copy the code

Realize a Chang ‘e

I used a picture instead of chang ‘e here, so the implementation is also simpler

Implement a background

Originally I want a night, with the stars, found that many people have achieved, then I change the meteor + stars background. (I guess you like to watch meteors, I have collected such canvas animation before) directly out of the use.

Let’s start with a canvas

// Get Canvas var stars = document.getelementById ("stars"); windowWidth = window.innerWidth; // The current window height stars.width = windowWidth; stars.height = window.innerHeight; Context = stars.getContext("2d");Copy the code
The stars

Place a small white dot on the canvas as a star. Use math. random to implement position randomization and control the number and range of stars. To have a flicker effect, just change the color and switch between small white dots and small black dots.

Var Star = function () {this.x = windowWidth * math.random (); // this.y = 5000 * math.random (); // this.text = "."; // text this.color = "white"; This.getcolor = function () {var _r = math.random (); If (_r < 0.5) {this.color = "#333"; } else { this.color = "white"; }} // initialize this.init = function () {this.getcolor (); } // draw this.draw = function () {context.fillstyle = this.color; context.fillText(this.text, this.x, this.y); Function playStars() {for (var n = 0; n < starCount; n++) { arr[n].getColor(); arr[n].draw(); } setTimeout("playStars()", 100); }Copy the code
A shooting star

Draw the meteor and move it out of the canvas and start moving again

/ * * * * draw meteor * * * * * * * * * * * * * * * * * * * * * * * * * * * / this. The draw = function () {/ / draw a meteor function context. The save (); context.beginPath(); context.lineWidth = 1; // width context.globalalpha = this.alpha; / / / / set the transparency to create horizontal gradient color, the starting point coordinates and end coordinates var line. = the context createLinearGradient (enclosing x, enclosing y, enclosing x + enclosing width, this.y - this.height); AddColorStop (0, "white"); Line. AddColorStop (0.3, enclosing color1); Line. AddColorStop (0.6, enclosing color2); context.strokeStyle = line; // Start context.moveto (this.x, this.y); // End context.lineto (this.x + this.width, this.y - this.height); context.closePath(); context.stroke(); context.restore(); } this.move = function () {var x = this.x + this.width - this.offset_x; var y = this.y - this.height; context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5); // context.strokeStyle="red"; // context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1); // Recalculate and move this.countpos () down to the left; // This. Alpha -= 0.002; / / redraw this. The draw (); }Copy the code

Add some animation

You’ve got the stars, you’ve got the meteor background and then you’ve got the Chang ‘e and the moon, so let’s get the Chang ‘e moving. I have written two animations here to achieve the effect of flying to the moon.

Chang ‘e shift, moving from the lower right corner to the moon position

@keyframes benyue { 0% { bottom: 0; right: 0; Transform: scale(1.2)} 50% {bottom: 20%; right: 20%; Transform: scale(0.8)} 100% {bottom: 40%; right: 40%; The transform: scale (0.4)}}Copy the code

The moon size change animation, so that the moon in conjunction with the larger and brighter

@keyframes yueliang {0% {transform: scale(0.5)} 100% {transform: scale(1.2)}}Copy the code

Realize the moon fairy

The above elements are done, a Chang ‘e moon has been completed

Complete code for yourself

  • Github code address

  • Gitee code address

summary

This is just a rough version, there are still a lot of areas to be optimized, such as adding an arc motion curve for Sister Chang ‘e, compressing the picture… , but may need more time, the follow-up may be optimized, after work began to realize this Chang ‘e moon, now have no dinner, as gan fan, go gan fan first!

Mid-Autumn festival will come, wish you a full moon person circle everything is satisfactory, wish you love sweet life happy!!

Mid-Autumn festival will come, wish you a full moon person circle everything is satisfactory, wish you love sweet life happy!!

Mid-Autumn festival will come, wish you a full moon person circle everything is satisfactory, wish you love sweet life happy!!

Feel free to leave a comment if you have anything to add or clarify.

Practice makes perfect! .