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

大家好，我是DongXH丶🐒 🐒，一只热爱生活的码猿🐒。。
如果喜欢我的文章，可以关注 ➕ 点赞，为我打气加油，我愿与你一同成长～

中秋节献礼🎑

说起中秋诗词，大家耳熟能详莫过于苏轼《水调歌头·明月几时有》，以及王建的《十五夜望月》，但其实在这两首之外，还有很多优秀的中秋诗词，譬如我最喜欢的中秋诗句之一便是唐朝殷文圭的“万里无云镜九州，最团圆夜是中秋。”

民俗学家们常说，中秋节直到明朝才具备“团圆”的节日内涵，但从殷文圭的诗句来看，虽然唐朝时中秋还未正式成为一个节日，但“中秋”在当时的人们心中，已然有了团圆的象征。

此次场景的size是以pc端的来实现的，没有调自适应和响应式，有兴趣的朋友可以自己修改一下或者大家一起来探讨。下面让我们看一下具体的实现代码吧。

月亮实现

<div class="moon">
    <div class="moon-pit">
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
    </div>
</div>

布局的话其实没什么特别，为了实现月亮上的阴影效果，查找了好多文档，目前想到的就是通过元素来实现，结合定位以及阴影，实现阴影的叠加。

.moon {
    position: absolute;
    left: 5em;
    top: 7em;
    font-size: 2rem;
    height: 5em;
    width: 5em;
    border-radius: 100%;
    box-shadow: 0 0 90px #f7ecae;
    background: #f7ecae;
}

.moon-pit {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.item {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #e5d286;
    box-shadow: 0px 0px 10px #e5d286;
    filter: blur(3px);
    display: block;
    position: absolute;
}

说明下月亮为什么要加入块状的阴影，参考的其实是下图：

但是具体的阴影浓度和位置的把控不知道该怎么处理，有好办法的小伙伴可以一起讨论，直接用图的话就感觉失去了活动的意义，所以自己手动拿标签进行了实现，还原度不够请大家谅解 [狗头]

背景星空实现

背景星空通过伪类元素创建大量 box-shadow 来实现，定位在月亮周围，通过 css 动画 transform 循环旋转，造成星空运动的效果。具体代码如下：

@keyframes orbit {
    0% {
        transform: rotateZ(0deg)
    }

    100% {
        transform: rotateZ(360deg)
    }
}

.moon::before,
.moon::after {
    position: absolute;
    top: 200%;
    left: -1000%;
    display: block;
    height: 200rem;
    width: 200rem;
    content: '';
    border-radius: 50%;
    z-index: -1;
    animation: orbit 300s infinite linear;
    box-shadow: -40rem -106rem 1rem -99.5rem #fff6, -40rem -106rem 1px -99.65rem #c568, -32rem -96rem 1.5rem -99.5rem #ffe8, -32rem -96rem 1px -99.9rem #ffc9, -31rem -110rem 1.5rem -99.5rem #ffe6, -31rem -110rem 1px -99.9rem #ffc6, -11rem -115rem 1.5rem -99.5rem #ffe8, -11rem -115rem 1px -99.9rem #ffc6, 11rem -105rem 1.5rem -99.5rem #ffe6, 11rem -105rem 1px -99.9rem #ffc6, -11rem -135rem 1.5rem -99.5rem #ffe4, -11rem -135rem 1px -99.9rem #ffc5, 31rem -115rem 1.5rem -99.5rem #ffe6, 31rem -115rem 1px -99.9rem #ffc6, -51rem -115rem 1.5rem -99.5rem #ffe9, -51rem -115rem 1px -99.9rem #ffc6, 21rem -125rem 1.5rem -99.5rem #ffe6, 21rem -125rem 1px -99.9rem #ffc6, 5rem -115rem 1.5rem -99.5rem #ffe9, 5rem -115rem 1px -99.9rem #ffc6, -96rem -32rem 1.5rem -99.5rem #ffe8, -96rem -32rem 1px -99.9rem #ffc9, -110rem -31rem 1.5rem -99.5rem #ffe6, -110rem -31rem 1px -99.9rem #ffc6, -115rem -11rem 1.5rem -99.5rem #ffe8, -115rem -11rem 1px -99.9rem #ffc6, -105rem 11rem 1.5rem -99.5rem #ffe6, -105rem 11rem 1px -99.9rem #ffc6, -135rem -11rem 1.5rem -99.5rem #ffe4, -135rem -11rem 1px -99.9rem #ffc5, -115rem 31rem 1.5rem -99.5rem #ffe6, -115rem 31rem 1px -99.9rem #ffc6, -115rem -51rem 1.5rem -99.5rem #ffe9, -115rem -51rem 1px -99.9rem #ffc6, -125rem 21rem 1.5rem -99.5rem #ffe6, -125rem 21rem 1px -99.9rem #ffc6, -115rem 5rem 1.5rem -99.5rem #ffe9, -115rem 5rem 1px -99.9rem #ffc6, 96rem 32rem 1.5rem -99.5rem #ffe8, 96rem 32rem 1px -99.9rem #ffc9, 110rem 31rem 1.5rem -99.5rem #ffe6, 110rem 31rem 1px -99.9rem #ffc6, 115rem 11rem 1.5rem -99.5rem #ffe8, 115rem 11rem 1px -99.9rem #ffc6, 105rem -11rem 1.5rem -99.5rem #ffe6, 105rem -11rem 1px -99.9rem #ffc6, 135rem 11rem 1.5rem -99.5rem #ffe4, 135rem 11rem 1px -99.9rem #ffc5, 115rem -31rem 1.5rem -99.5rem #ffe6, 115rem -31rem 1px -99.9rem #ffc6, 115rem 51rem 1.5rem -99.5rem #ffe9, 115rem 51rem 1px -99.9rem #ffc6, 125rem -21rem 1.5rem -99.5rem #ffe6, 125rem -21rem 1px -99.9rem #ffc6, 115rem -5rem 1.5rem -99.5rem #ffe9, 115rem -5rem 1px -99.9rem #ffc6, -21rem -125rem 1.5rem -99.5rem #ffe8, -21rem -125rem 1px -99.9rem #ffc6, -61rem -105rem 1.5rem -99.5rem #ffe3, -61rem -105rem 1px -99.9rem #ffc6, -61rem -95rem 1.5rem -99.5rem #ffe4, -61rem -95rem 1px -99.9rem #ffc6, -71rem -75rem 1.5rem -99.5rem #ffe7, -71rem -75rem 1px -99.9rem #ffc6, -55rem -85rem 1.5rem -99.5rem #ffe6, -55rem -85rem 1px -99.9rem #ffc6, -125rem -21rem 1.5rem -99.5rem #ffe8, -125rem -21rem 1px -99.9rem #ffc6, -105rem -61rem 1.5rem -99.5rem #ffe3, -105rem -61rem 1px -99.9rem #ffc6, -95rem -61rem 1.5rem -99.5rem #ffe4, -95rem -61rem 1px -99.9rem #ffc6, 75rem 71rem 1.5rem -99.5rem #ffe7, 75rem 71rem 1px -99.9rem #ffc6, 85rem 55rem 1.5rem -99.5rem #ffe6, 85rem 55rem 1px -99.9rem #ffc6, 125rem 21rem 1.5rem -99.5rem #ffe8, 125rem 21rem 1px -99.9rem #ffc6, 105rem 61rem 1.5rem -99.5rem #ffe3, 105rem 61rem 1px -99.9rem #ffc6, 95rem 61rem 1.5rem -99.5rem #ffe4, 95rem 61rem 1px -99.9rem #ffc6, 75rem 71rem 1.5rem -99.5rem #ffe7, 75rem 71rem 1px -99.9rem #ffc6, 85rem 55rem 1.5rem -99.5rem #ffe6, 85rem 55rem 1px -99.9rem #ffc6, 32rem 96rem 1.5rem -99.5rem #ffe8, 32rem 96rem 1px -99.9rem #ffc9, 31rem 110rem 1.5rem -99.5rem #ffe6, 31rem 110rem 1px -99.9rem #ffc6, 11rem 115rem 1.5rem -99.5rem #ffe8, 11rem 115rem 1px -99.9rem #ffc6, -11rem 105rem 1.5rem -99.5rem #ffe6, -11rem 105rem 1px -99.9rem #ffc6, 11rem 135rem 1.5rem -99.5rem #ffe4, 11rem 135rem 1px -99.9rem #ffc5, -31rem 115rem 1.5rem -99.5rem #ffe6, -31rem 115rem 1px -99.9rem #ffc6, 51rem 115rem 1.5rem -99.5rem #ffe9, 51rem 115rem 1px -99.9rem #ffc6, -21rem 125rem 1.5rem -99.5rem #ffe6, -21rem 125rem 1px -99.9rem #ffc6, -5rem 115rem 1.5rem -99.5rem #ffe9, -5rem 115rem 1px -99.9rem #ffc6, 21rem 125rem 1.5rem -99.5rem #ffe8, 21rem 125rem 1px -99.9rem #ffc6, 61rem 105rem 1.5rem -99.5rem #ffe3, 61rem 105rem 1px -99.9rem #ffc6, 61rem 95rem 1.5rem -99.5rem #ffe4, 61rem 95rem 1px -99.9rem #ffc6, 71rem 75rem 1.5rem -99.5rem #ffe7, 71rem 75rem 1px -99.9rem #ffc6, 55rem 85rem 1.5rem -99.5rem #ffe6, 55rem 85rem 1px -99.9rem #ffc6
}

.moon::after {
    opacity: .35;
    animation-delay: -100s;
    animation-duration: 600s;
    top: 10vh
}

打字机效果实现

通过文本中的 br 标签进行分割换行，创建一个隐藏的文字内容容器，然后通过获取隐藏容器的 innerHTML 然后通过正则截取的方式的方式把尾部的输入标签进行裁剪，进行 innerHTML 的赋值操作实现动态的打字效果。 具体代码如下：

  <div id="myContent"></div>
  <div id="contentToWrite" style="display:none;"> 八月十五夜<br>殷文圭 唐<br> 万里无云镜九州，最团圆夜是中秋。<br>满衣冰彩拂不落，遍地水光凝欲流。<br>
    华岳影寒清露掌，海门风急白潮头。<br>因君照我丹心事，减得愁人一夕愁。<br></div>

<script>
    let charIndex = -1;
    let stringLength = 0;
    let inputText;
    let currentStyle = 'inline';

    function writeContent(init) {
      if (init) {
        inputText = document.getElementById('contentToWrite').innerHTML;
      }
      if (charIndex == -1) {
        charIndex = 0;
        stringLength = inputText.length;
      }
      let initString = document.getElementById('myContent').innerHTML;
      initString = initString.replace(/<SPAN.*$/gi, "");
      let theChar = inputText.charAt(charIndex);
      let nextFourChars = inputText.substr(charIndex, 4);
      if (nextFourChars == '<BR>' || nextFourChars == '<br>') {
        theChar = '<BR>';
        charIndex += 3;
      }
      initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
      document.getElementById('myContent').innerHTML = initString;
      charIndex = charIndex / 1 + 1;
      if (charIndex % 2 == 1) {
        document.getElementById('blink').style.display = 'none';
      } else {
        document.getElementById('blink').style.display = 'inline';
      }
      console.log(charIndex, stringLength);
      if (charIndex <= stringLength) {
        setTimeout("writeContent(false)", 140);
      } else {
        blinkSpan();
      }
    }
    function blinkSpan() {
      if (currentStyle == 'inline') {
        currentStyle = 'none';
      } else {
        currentStyle = 'inline';
      }
      document.getElementById('blink').style.display = currentStyle;
    }
    writeContent(true);
  </script>

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>月亮</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="moon">
    <div class="moon-pit">
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </div>
  <div id="myContent"></div>
  <div id="contentToWrite" style="display:none;"> 八月十五夜<br>殷文圭 唐<br> 万里无云镜九州，最团圆夜是中秋。<br>满衣冰彩拂不落，遍地水光凝欲流。<br>
    华岳影寒清露掌，海门风急白潮头。<br>因君照我丹心事，减得愁人一夕愁。<br></div>
  <script>
    let charIndex = -1;
    let stringLength = 0;
    let inputText;
    let currentStyle = 'inline';

    function writeContent(init) {
      if (init) {
        inputText = document.getElementById('contentToWrite').innerHTML;
      }
      if (charIndex == -1) {
        charIndex = 0;
        stringLength = inputText.length;
      }
      let initString = document.getElementById('myContent').innerHTML;
      initString = initString.replace(/<SPAN.*$/gi, "");
      let theChar = inputText.charAt(charIndex);
      let nextFourChars = inputText.substr(charIndex, 4);
      if (nextFourChars == '<BR>' || nextFourChars == '<br>') {
        theChar = '<BR>';
        charIndex += 3;
      }
      initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
      document.getElementById('myContent').innerHTML = initString;
      charIndex = charIndex / 1 + 1;
      if (charIndex % 2 == 1) {
        document.getElementById('blink').style.display = 'none';
      } else {
        document.getElementById('blink').style.display = 'inline';
      }
      console.log(charIndex, stringLength);
      if (charIndex <= stringLength) {
        setTimeout("writeContent(false)", 140);
      } else {
        blinkSpan();
      }
    }
    function blinkSpan() {
      if (currentStyle == 'inline') {
        currentStyle = 'none';
      } else {
        currentStyle = 'inline';
      }
      document.getElementById('blink').style.display = currentStyle;
    }
    writeContent(true);
  </script>
</body>

</html>

body {
    height: 100vh;
    overflow: hidden;
    background-image: radial-gradient(navy, #002);
}

html {
    width: 100%;
    height: 100%;
    position: relative;
}

.moon {
    position: absolute;
    left: 5em;
    top: 7em;
    font-size: 2rem;
    height: 5em;
    width: 5em;
    border-radius: 100%;
    box-shadow: 0 0 90px #f7ecae;
    background: #f7ecae;
}

.moon-pit {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.item {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #e5d286;
    box-shadow: 0px 0px 10px #e5d286;
    filter: blur(3px);
    display: block;
    position: absolute;
}

.item:nth-child(1) {
    width: 1.5em;
    left: 40%;
    top: -2%;
}

.item:nth-child(2) {
    left: 60%;
    top: 40%;
}

.item:nth-child(3) {
    left: 23%;
    top: 40%;
}

.item:nth-child(4) {
    width: 1.2em;
    left: 80%;
    top: 70%;
    transform: rotate(-35deg);
}

.item:nth-child(5) {
    width: 1.2em;
    left: 20%;
    top: 90%;
    transform: rotate(15deg);
}

.item:nth-child(6) {
    width: 1.2em;
    height: 0.8em;
    left: 18%;
    top: 17%;
    transform: rotate(15deg);
}

.item:nth-child(7) {
    width: 1em;
    height: 1em;
    left: 43%;
    top: 56%;

}

.item:nth-child(8) {
    width: 1.3em;
    height: 1.3em;
    left: 40%;
    top: 40%;
    transform: rotate(15deg);
}

.item:nth-child(9) {
    width: .3em;
    height: .3em;
    left: 80%;
    top: 34%;
}

.item:nth-child(10) {
    width: .3em;
    height: .3em;
    left: 10%;
    top: 64%;
}

@keyframes orbit {
    0% {
        transform: rotateZ(0deg)
    }

    100% {
        transform: rotateZ(360deg)
    }
}

.moon::before,
.moon::after {
    position: absolute;
    top: 200%;
    left: -1000%;
    display: block;
    height: 200rem;
    width: 200rem;
    content: '';
    border-radius: 50%;
    z-index: -1;
    animation: orbit 300s infinite linear;
    box-shadow: -40rem -106rem 1rem -99.5rem #fff6, -40rem -106rem 1px -99.65rem #c568, -32rem -96rem 1.5rem -99.5rem #ffe8, -32rem -96rem 1px -99.9rem #ffc9, -31rem -110rem 1.5rem -99.5rem #ffe6, -31rem -110rem 1px -99.9rem #ffc6, -11rem -115rem 1.5rem -99.5rem #ffe8, -11rem -115rem 1px -99.9rem #ffc6, 11rem -105rem 1.5rem -99.5rem #ffe6, 11rem -105rem 1px -99.9rem #ffc6, -11rem -135rem 1.5rem -99.5rem #ffe4, -11rem -135rem 1px -99.9rem #ffc5, 31rem -115rem 1.5rem -99.5rem #ffe6, 31rem -115rem 1px -99.9rem #ffc6, -51rem -115rem 1.5rem -99.5rem #ffe9, -51rem -115rem 1px -99.9rem #ffc6, 21rem -125rem 1.5rem -99.5rem #ffe6, 21rem -125rem 1px -99.9rem #ffc6, 5rem -115rem 1.5rem -99.5rem #ffe9, 5rem -115rem 1px -99.9rem #ffc6, -96rem -32rem 1.5rem -99.5rem #ffe8, -96rem -32rem 1px -99.9rem #ffc9, -110rem -31rem 1.5rem -99.5rem #ffe6, -110rem -31rem 1px -99.9rem #ffc6, -115rem -11rem 1.5rem -99.5rem #ffe8, -115rem -11rem 1px -99.9rem #ffc6, -105rem 11rem 1.5rem -99.5rem #ffe6, -105rem 11rem 1px -99.9rem #ffc6, -135rem -11rem 1.5rem -99.5rem #ffe4, -135rem -11rem 1px -99.9rem #ffc5, -115rem 31rem 1.5rem -99.5rem #ffe6, -115rem 31rem 1px -99.9rem #ffc6, -115rem -51rem 1.5rem -99.5rem #ffe9, -115rem -51rem 1px -99.9rem #ffc6, -125rem 21rem 1.5rem -99.5rem #ffe6, -125rem 21rem 1px -99.9rem #ffc6, -115rem 5rem 1.5rem -99.5rem #ffe9, -115rem 5rem 1px -99.9rem #ffc6, 96rem 32rem 1.5rem -99.5rem #ffe8, 96rem 32rem 1px -99.9rem #ffc9, 110rem 31rem 1.5rem -99.5rem #ffe6, 110rem 31rem 1px -99.9rem #ffc6, 115rem 11rem 1.5rem -99.5rem #ffe8, 115rem 11rem 1px -99.9rem #ffc6, 105rem -11rem 1.5rem -99.5rem #ffe6, 105rem -11rem 1px -99.9rem #ffc6, 135rem 11rem 1.5rem -99.5rem #ffe4, 135rem 11rem 1px -99.9rem #ffc5, 115rem -31rem 1.5rem -99.5rem #ffe6, 115rem -31rem 1px -99.9rem #ffc6, 115rem 51rem 1.5rem -99.5rem #ffe9, 115rem 51rem 1px -99.9rem #ffc6, 125rem -21rem 1.5rem -99.5rem #ffe6, 125rem -21rem 1px -99.9rem #ffc6, 115rem -5rem 1.5rem -99.5rem #ffe9, 115rem -5rem 1px -99.9rem #ffc6, -21rem -125rem 1.5rem -99.5rem #ffe8, -21rem -125rem 1px -99.9rem #ffc6, -61rem -105rem 1.5rem -99.5rem #ffe3, -61rem -105rem 1px -99.9rem #ffc6, -61rem -95rem 1.5rem -99.5rem #ffe4, -61rem -95rem 1px -99.9rem #ffc6, -71rem -75rem 1.5rem -99.5rem #ffe7, -71rem -75rem 1px -99.9rem #ffc6, -55rem -85rem 1.5rem -99.5rem #ffe6, -55rem -85rem 1px -99.9rem #ffc6, -125rem -21rem 1.5rem -99.5rem #ffe8, -125rem -21rem 1px -99.9rem #ffc6, -105rem -61rem 1.5rem -99.5rem #ffe3, -105rem -61rem 1px -99.9rem #ffc6, -95rem -61rem 1.5rem -99.5rem #ffe4, -95rem -61rem 1px -99.9rem #ffc6, 75rem 71rem 1.5rem -99.5rem #ffe7, 75rem 71rem 1px -99.9rem #ffc6, 85rem 55rem 1.5rem -99.5rem #ffe6, 85rem 55rem 1px -99.9rem #ffc6, 125rem 21rem 1.5rem -99.5rem #ffe8, 125rem 21rem 1px -99.9rem #ffc6, 105rem 61rem 1.5rem -99.5rem #ffe3, 105rem 61rem 1px -99.9rem #ffc6, 95rem 61rem 1.5rem -99.5rem #ffe4, 95rem 61rem 1px -99.9rem #ffc6, 75rem 71rem 1.5rem -99.5rem #ffe7, 75rem 71rem 1px -99.9rem #ffc6, 85rem 55rem 1.5rem -99.5rem #ffe6, 85rem 55rem 1px -99.9rem #ffc6, 32rem 96rem 1.5rem -99.5rem #ffe8, 32rem 96rem 1px -99.9rem #ffc9, 31rem 110rem 1.5rem -99.5rem #ffe6, 31rem 110rem 1px -99.9rem #ffc6, 11rem 115rem 1.5rem -99.5rem #ffe8, 11rem 115rem 1px -99.9rem #ffc6, -11rem 105rem 1.5rem -99.5rem #ffe6, -11rem 105rem 1px -99.9rem #ffc6, 11rem 135rem 1.5rem -99.5rem #ffe4, 11rem 135rem 1px -99.9rem #ffc5, -31rem 115rem 1.5rem -99.5rem #ffe6, -31rem 115rem 1px -99.9rem #ffc6, 51rem 115rem 1.5rem -99.5rem #ffe9, 51rem 115rem 1px -99.9rem #ffc6, -21rem 125rem 1.5rem -99.5rem #ffe6, -21rem 125rem 1px -99.9rem #ffc6, -5rem 115rem 1.5rem -99.5rem #ffe9, -5rem 115rem 1px -99.9rem #ffc6, 21rem 125rem 1.5rem -99.5rem #ffe8, 21rem 125rem 1px -99.9rem #ffc6, 61rem 105rem 1.5rem -99.5rem #ffe3, 61rem 105rem 1px -99.9rem #ffc6, 61rem 95rem 1.5rem -99.5rem #ffe4, 61rem 95rem 1px -99.9rem #ffc6, 71rem 75rem 1.5rem -99.5rem #ffe7, 71rem 75rem 1px -99.9rem #ffc6, 55rem 85rem 1.5rem -99.5rem #ffe6, 55rem 85rem 1px -99.9rem #ffc6
}

.moon::after {
    opacity: .35;
    animation-delay: -100s;
    animation-duration: 600s;
    top: 10vh
}
#myContent{
    color:#fff;
    width: 400px;
    height: 400px;
    font-size:18px;
    line-height: 36px;
    text-align: center;
    position: absolute;
    left:40%;
    top:10em;
}

总结

最终的效果大家应该都在封面看到了，如果没注意也没关系，上边有我贴出全部代码供大家参考。

还有一点小遗憾没有搞定，再加个烟花效果可能会更好看，后期进行完善。

此篇文章不仅想让你在中秋来临之际送大家一个祝福，还希望在学习上对你有所帮助，在此祝福你们：月饼管饱，赚钱不少！ 。