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

preface

Hello everyone, I am CV Zhuye, the Mid-Autumn Festival is coming, I wish you in front of the screen, a happy Mid-Autumn Festival!!

Unexpectedly everyone came, with chang ‘e to see the moon!

What? How would you like to see that happen? Then read on!

Open to

Draw the starry sky in the background

Let’s start with the flowing stars in the background. Because there are so many stars, I use boxShadow to add multiple white dots as stars at once.

</div> CSS: #stars {width: 2px; height: 2px; background: transparent; animation: animStar 30s linear infinite; position: absolute; top: 0; left: 0; } @frames animStar {from {transform: translateY(0px)} to {transform: translateY(-500px)}} js <script> let dom = document.getElementById('stars'); Function randomNum(minNum, maxNum) {// Generate random number switch (arguments.length) {case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); break; default: return 0; break; } } let boxShadow = ""; let num = 100; For (let I =0; i<num; i++){ boxShadow = boxShadow + `${randomNum(1, 1000)}px ${randomNum(1, 1000)}px #FFF` if(i==num-1){ boxShadow = boxShadow + ''; }else{ boxShadow = boxShadow + ',' } } dom.style.boxShadow = boxShadow; </script>Copy the code

Draw the moon

Next, we will draw a big round moon, and achieve the moon gradient effect through background linear-gradient, and box-shadow to achieve halo

</div> CSS: /* moon */ #moon {position: absolute; right: 100px; top: 50px; width: 80px; height: 80px; background-color: #F2F2F2; background: linear-gradient(to right, #ffedd2 20%, #F2F2F2 80%); border-radius: 100px; box-shadow: 0 0 60px 50px rgb(135 135 160 / 40%); opacity: 1; z-index: 2; }Copy the code

Then, we draw a grassland, casually let chang ‘e stand up

This grass, it’s just a green patch.

<div class="girl"><img SRC ="./e.png" Alt =""></div> /* Grassland */. Grassland {position: absolute; bottom: 0; width: 100%; height: 30px; background: #134a1d; border-radius: 50% 50% 0 0; } img{ width: 100%; height: 100%; } /* chang-e */. Girl {width: 150px; position: absolute; bottom: 0; left: 500px; opacity: .8; }Copy the code

This is mostly done, we add a blessing words, all the code in the following oh!

Front-end code:

<! PUBLIC DOCTYPE HTML "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; Charset = UTF-8 "/> <title> Chang-e-month </title> <link type="text/ CSS" href=" CSS /style. CSS "rel="stylesheet" /> </head> <body> <div  class="box"> <! <div id="stars"></div> <! <div id="moon"></div> <! <div class=" Grassland "></div> <! - the goddess of the moon -- -- > < div class = "girl" > < img SRC = ". / e.p ng "Alt =" "> < / div > <! </div> </div> <script> let dom = document.getelementbyid ('stars'); function randomNum(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); break; default: return 0; break; } } let boxShadow = ""; let num = 100; For (let I =0; i<num; i++){ boxShadow = boxShadow + `${randomNum(1, 1000)}px ${randomNum(1, 1000)}px #FFF` if(i==num-1){ boxShadow = boxShadow + ''; }else{ boxShadow = boxShadow + ',' } } dom.style.boxShadow = boxShadow; </script> </body> </html>Copy the code

CSS styles:

@charset "utf-8"; .box{ margin: auto; width: 1000px; height: 500px; background: radial-gradient(ellipse at bottom, #1b2735 0, #090a0f 100%); overflow: hidden; position: relative; } /* stars */ #stars {width: 2px; height: 2px; background: transparent; animation: animStar 30s linear infinite; position: absolute; top: 0; left: 0; } @keyframes animStar { from { transform: translateY(0px) } to { transform: TranslateY (-500px)}} /* moon */ #moon {position: absolute; right: 100px; top: 50px; width: 80px; height: 80px; background-color: #F2F2F2; background: linear-gradient(to right, #ffedd2 20%, #F2F2F2 80%); border-radius: 100px; box-shadow: 0 0 60px 50px rgb(135 135 160 / 40%); opacity: 1; z-index: 2; } /* Grassland */. Grassland {position: absolute; bottom: 0; width: 100%; height: 30px; background: #134a1d; border-radius: 50% 50% 0 0; } img{ width: 100%; height: 100%; } /* chang-e */. Girl {width: 150px; position: absolute; bottom: 0; left: 500px; opacity: .8; } /* text */.txt{position: absolute; bottom: 150px; right: 400px; color: #fff; opacity: 0; animation: animTxt 5s linear infinite; } @keyframes animTxt { from { opacity: 0; } to { opacity: .8; }}Copy the code

Pictures of Chang ‘e:

conclusion

We feel good, for sister Chang ‘e praise it, I wish you a happy Mid-Autumn Festival, write code without bugs!!