I am participating in the Mid-Autumn Festival Creative Submission Contest. Please see: Mid-Autumn Festival Creative Submission Contest for details.

Soon to the Mid-Autumn Festival, we know that every year’s Mid-Autumn Festival, the moon is big, and round, today, we come to use the code, to achieve a big and round moon.

Before that, let’s review what box-shadow is all about

value instructions
h-shadow Required. Position of horizontal shadows. Allow the negative
v-shadow Required. Position of vertical shadows. Allow the negative
blur Optional. A fuzzy distance
spread Optional. Size of shadow
color Optional. Shadow color. Find the complete list of color values in CSS Color Values
inset Optional. Change the inner shadow from the outer shadow (at the beginning) 
Box-shadow: *h-shadow v-shadow blur spread color* inset; * Note: The * boxShadow attribute adds one or more drop shadows to the box. This property is a comma-separated list of shadows, each defined by 2-4 length values, an optional color value, and an optional inset keyword. The value of the ellipsis length is 0.Copy the code

Let’s begin the autumn night

The dark night

It was a great night, and we had to have that background

<div class="bg">
       <div class="yueliang"></div>
</div>css .bg{ height: 100vh; width: auto; background: At the radial center, RGB (67, 19, 122) 20%, RGB (6,6,70) 55%, RGB (7,7,70) 70%, RGB (18, 2, 56) 85%,rgb(5, 1, 22) 100%); overflow: hidden; z-index: 1; }Copy the code

The moon

And then you need a bright moon like this

<div class="bg">
       <div class="yueliang"></div>
</div>
css
.yueliang{
     height: 400px;
     width: 400px;
     background-color: rgb(250, 246, 227);
     border-radius: 50%;
     z-index: 1;
     position: absolute;
     left: 40%;
     font-family: cursive;
       box-shadow:0 0 50px rgb(251 255 254);
}
Copy the code

Chang e

Create an animation effect of Chang ‘e running to the moon using animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Copy the code
value instructions
animation-name Specifies the name of the keyframe to bind to the selector
animation-duration The animation specifies how many seconds or milliseconds it takes to complete
animation-timing-function How will the set animation complete a cycle
animation-delay Sets the delay interval before animation starts.
animation-iteration-count Defines the number of times an animation is played.
animation-direction Specifies whether the animation should take turns playing backwards.
animation-fill-mode Specifies the style to be applied to an element when the animation does not play (when the animation is complete, or when the animation has a delay that does not start playing).
animation-play-state Specifies whether the animation is running or paused.
initial Sets the property to its default value.Reading aboutinitialIn this paper.
inherit Inheriting attributes from a parent element.Reading aboutinitinheritalIn this paper. 
<div class="bg">
       <div class="yueliang">
           <img id="girl" src="images/1.png" style="animation: 6s linear 0s 1 normal none running appear;">
       </div>
</div>css .bg { height: 100vh; width: auto; background: radial-gradient(150% 95% at bottom center, rgb(67, 19, 122) 20%, rgb(6, 6, 70) 55%, rgb(7, 7, 70) 70%, rgb(18, 2, 56) 85%, rgb(5, 1, 22) 100%); overflow: hidden; z-index: 1; } .yueliang { height: 400px; width: 400px; background-color: rgb(250, 246, 227); border-radius: 50%; z-index: 1; position: absolute; left: 40%; top: 50%; box-shadow: 0 0 50px rgb(251 255 254); } #girl { width: 150px; height: 150px; position: absolute; left: 89%; top: 28%; z-index: 3; } @keyframes appear { 0% { opacity: 0; left: 128%; top: 188%; } 100% { opacity: 1; left: 89%; top: 28%; }}Copy the code

rendering