我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛”

马上又到中秋节了，我们就知道，每年的中秋，月亮又大，又圆，今天，我们来用代码，实现一个又大又圆的月亮。

在此，之前，我们先来回顾一下box-shadow的相关知识

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在[CSS颜色值]寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

元素添加阴影
box-shadow: *h-shadow v-shadow blur spread color* inset;
*注意：* boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

开始我们中秋夜

黑夜

那是一个美好的夜晚，我们先要有这样一个背景

微信截图_20210910171747.png

<div class="bg">
       <div class="yueliang"></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;
   }

月亮

然后需要一个这样亮亮的月亮

微信截图_20210910172131.png

<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);
}

嫦娥奔月

创建一个嫦娥奔向月亮的一个动画效果，使用animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。阅读关于 initial的介绍。
inherit	从父元素继承属性。阅读关于 initinherital的介绍。

<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%;
      }
    }

效果图

中秋嫦娥奔月动画

开始我们中秋夜

黑夜

月亮

嫦娥奔月