中秋专题：🌕但愿人长久，一起吃月饼🥮🏮中秋创意投稿，CSS+JS实现一只狂吃月饼的小可爱🌕 🌕但愿人长久，一起

前言 📣

咱啥也不会就用CSS表演个吃月饼🥮吧~狂吃狂吃~~~

准备工作📝

一、`CSS`+`JS`先实现一个星空动画

1️⃣首先，我们需要创建一个包含星星的星空。我们使用JavaScript来动态生成这些星星，让它们以不同的速度闪烁，仿佛夜空中的真实星星。

// 星空
for (let i = 0; i < 120; i++) { // 创建 120 个星星 
    const star = document.createElement("div"); // 创建一个 div 元素来表示星星 
    star.className = "star"; // 设置 div 的类名为 "star"，以便应用 CSS 样式
    star.style.top = `${Math.random() * 100}%`; // 设置星星的随机垂直位置 
    star.style.left = `${Math.random() * 100}%`; // 设置星星的随机水平位置 const 
    delay = Math.random() * 10; // 随机生成一个延迟时间 
    star.style.animationDelay = `${delay}s`; // 将延迟时间应用到星星的闪烁动画 
    document.querySelector(".star-group").appendChild(star); // 将星星添加到名为 "star-group" 的容器中 
    setTimeout(() => { 
        star.classList.add("active"); // 在随机延迟后，将 "active" 类应用到星星，触发闪烁动画 
    }, delay * 1000); // 延迟时间乘以1000以将其转换为毫秒 
  }

/* 添加一个星星元素 */
.star {
  position: fixed; /* 将星星的定位方式设置为固定，使其在窗口中保持固定位置 */
  width: 2px; /* 设置星星的宽度 */
  height: 2px; /* 设置星星的高度 */
  background-color: #fff; /* 设置星星的背景颜色为白色 */
  border-radius: 50%; /* 使星星呈现为圆形，设置边框半径为50% */
}

/* 使用动画使星星闪烁 */
@keyframes twinkling {
  0% {
    opacity: 1; /* 在动画开始时，星星完全可见，不透明度为1 */
  }
  100% {
    opacity: 0; /* 在动画结束时，星星完全不可见，不透明度为0 */
  }
}

/* 将闪烁效果应用在星星元素上 */
.star.active {
  animation: twinkling 1s ease-in-out infinite alternate; /* 使用 "twinkling" 动画，持续1秒，以"ease-in-out"的缓动函数无限交替播放 */
  -webkit-animation: twinkling 1s ease-in-out infinite alternate; /* 添加适用于 WebKit 浏览器的样式 */
}

/* 创建一组星星 */
.star-group {
  position: absolute; /* 将星星组的定位方式设置为绝对定位，以便在页面上控制它们的位置 */
  top: 0;
  left: 0; 
  right: 0; 
  bottom: 0; 
}

得到了闪烁的星空

2️⃣实现五角星⭐

利用clip-path属性中的多边形剪裁路径，实现一个五角星

/* 五角星*/
.star-item {
  position: absolute;
  color: #fff;
  font-size: 24px;
  width: 1em;
  height: 1em;
  line-height: 4em;
  background: linear-gradient(#febd4b, #fed84a);
  clip-path: polygon(50% 0, 65% 40%, 100% 40%, 72% 60%, 85% 100%, 50% 75%, 15% 100%, 28% 60%, 0 40%, 35% 40%);
  animation: twinkle 1.3s ease-in-out infinite;// 闪烁动画
  -webkit-animation: twinkle 1.3s ease-in-out infinite;
}
/* 星星动画 */
@keyframes twinkle {
  20% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}

然后再多写几个定位到不同位置，实现五角星闪烁⭐ 其他的可以搞一些小圆圈随机定位下，加上twinkle动画，页面背景丰富一点~

二、利用`HTML`+`CSS`创建🌕小可爱

使用CSS的 linear-gradient 属性来创建月亮的渐变背景色。这个背景色包括三种颜色：黄色、橙色和深黄色，用于模拟月球表面的光照和阴影。
使用CSS的 clip-path 属性来裁剪一个圆形区域，然后在这个区域内添加多个圆形元素来模拟坑洞。
来添加多个坑洞元素，它们将模拟月球表面的坑洞。我们使用不同大小和颜色的圆形元素定位来实现这个效果。

/* 月亮的样式 */ 
.moon { 
    position: absolute; 
    width: 30em; /* 设置月亮的宽度 */ 
    height: 30em; /* 设置月亮的高度 */ 
    background: linear-gradient(145deg, #f5f985 15%, #fbcc21 70%, #deb618 100%); /* 使用线性渐变背景模拟月亮的颜色 */ 
    border-radius: 50%; 
    box-shadow: 0 0 20px 8px rgba(249, 218, 59, 0.2); /* 添加柔和的阴影效果，增强月亮的立体感 */ 
 } 
/* 月球表面坑的容器 */ 
.circle-box { 
    width: 30em; /* 设置坑洞容器的宽度，与月亮相同 */ 
    height: 30em; /* 设置坑洞容器的高度，与月亮相同 */ 
    clip-path: circle(50%); /* 使用圆形剪切路径，使坑洞容器成为一个圆 */ 
}
/* 创建一个圆形坑洞 */ 
.circle { 
    position: absolute; /* 使用绝对定位，使圆形坑洞可以放置在坑洞容器内的任何位置 */ 
    background: #e9d644; /* 设置坑洞的背景颜色 */ 
    border-radius: 50%; /* 设置坑洞的边框半径，使其呈圆形 */ 
    width: 4em; /* 设置坑洞的宽度 */ 
    height: 4em; /* 设置坑洞的高度 */ 
 }
 /* ...添加其他圆形坑洞，每个都有不同的位置和颜色，用以模拟月球表面的坑洞多样性 */

三、实现小帽子🎩

通过使用CSS样式和伪元素，赋予帽子立体感和细节，实现元素主要包括包括帽子的上半部分（帽顶）和下半部分（帽底）。

.hat 类设置了帽子的整体样式，包括位置、大小、层级和缩放效果。
.hat-bottom 类定义了帽子的下半部分，具有白色背景、圆角边框和阴影效果。
.hat-top 类创建了帽子的上半部分，形状为三角形，具有特定的边框样式和伪元素，用于增加细节。

/* 帽子样式开始 */
.hat {
  position: absolute; 
  top: -29%; 
  left: 38%; 
  z-index: 2; /* 设置堆叠顺序为2，使帽子位于其他元素之上 */
  transform: scale(1.5); /* 缩放帽子，使其看起来更大 */
}

/* 帽子底部样式 */
.hat-bottom {
  width: 7em; /* 设置帽子底部的宽度 */
  height: 2em; /* 设置帽子底部的高度 */
  margin: 0 auto; /* 居中对齐 */
  background: #fff; 
  position: relative; /* 设置相对定位，用于伪元素的定位 */
  top: 1.3em; 
  border-radius: 80px 80px 0 0 / 60px 60px 0 0; /* 圆角边框样式 */
  overflow: hidden; /* 隐藏超出边框范围的内容 */
  box-shadow: inset 5px 0 20px rgba(0, 0, 0, 0.1); /* 设置内部阴影效果 */
}

/* 帽子顶部三角形样式 */
.hat-top {
  width: 0.6em; /* 设置帽子顶部三角形的宽度 */
  height: 0; /* 设置高度为0，即三角形 */
  margin: 0 auto; 
  position: relative; 
  top: 2em;
  border-bottom: 4em solid #476ce9; /* 用边框绘制下半部分的三角形 */
  border-left: 3em solid transparent; /* 透明的左边框 */
  border-right: 1em solid transparent; /* 透明的右边框 */
}

/* 为三角形创建左上角小三角形 */
.hat-top:before {
  content: ""; 
  position: absolute; 
  left: 0.6em; 
  top: -0.2em; 
  width: 0; 
  height: 0; 
  border-bottom: 1.3em solid #2b4ec5; /* 用边框绘制小三角形 */
  border-left: 0.8em solid transparent; /* 透明的左边框 */
  border-right: 0.6em solid transparent; /* 透明的右边框 */
  transform: rotate(72deg); /* 旋转角度，创建左上角小三角形 */
}

/* 为三角形创建右上角小圆形 */
.hat-top:after {
  content: ""; 
  position: absolute; 
  left: 1.3em;
  top: -0.4em; 
  width: 1.2em; 
  height: 1.2em; 
  background: #fff;
  border-radius: 50%; 
  box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.15); /* 内部阴影效果 */
}
/* 帽子样式结束 */

四、实现动态嘴巴动画🫦

会创建一个嘴巴元素，通过改变嘴巴的状态，实现月饼🌕的"吃掉"效果。动画将周期性地切换嘴巴的状态，同时替换月饼图像，从而模拟吃东西的效果。

HTML 结构

需要一个包含月饼图像、嘴巴内部和嘴巴轮廓的HTML元素：

  <!-- 嘴巴 -->
  <div class="mouth-wrapper">
    <!-- 嚼东西 -->
    <div class="mouth-outline"></div>
    <!-- 咬东西 -->
    <div class="mouth-inner"></div>
  </div>

CSS 样式

接下来，我们使用CSS为这些元素添加样式，使它们呈现出嘴巴和月饼的外观：

/* 嘴巴 */
.mouth-wrapper {
  /* 样式属性... */
}
/* 吃东西 */
.mouth-outline {
  /* 样式属性... */
}
.mouth-inner {
  /* 样式属性... */
}
/* 嚼东西动画 */
@keyframes jiaoClose {
  /* 动画关键帧... */
}
/* 咬东西动画 */
@keyframes eatOpen {
  /* 动画关键帧... */
}

JavaScript 动画

最后，使用JavaScript来控制嘴巴的动画。我们会添加一个定时器，周期性地切换嘴巴的状态，并替换月饼的图片。

// 获取mooncake图片和mouth-inner、mouth-outline元素
const mooncakeImage = document.getElementById("mooncake");
const mouthInner = document.querySelector(".mouth-inner");
const mouthOutline = document.querySelector(".mouth-outline");

// 设置初始状态，mooncake图片路径和嘴巴状态
let isOpen = true; // 初始状态为打开嘴巴

// 添加定时器来交替显示和隐藏mouth-inner和mouth-outline，以及替换mooncake图片
function toggleMouthState() {
  if (isOpen) {
    // 切换到闭合嘴巴状态
    mouthInner.style.display = "none";
    mouthOutline.style.display = "block";
    // 替换mooncake图片为闭合状态的图片
    mooncakeImage.src = "https://x.imgs.ovh/x/2023/09/14/6502d94e7e15a.png";
  } else {
    // 切换到张开嘴巴状态
    mouthInner.style.display = "block";
    mouthOutline.style.display = "none";
    // 替换mooncake图片为原始状态的图片
    mooncakeImage.src = "https://x.imgs.ovh/x/2023/09/14/6502d94f234b3.png";
  }
  isOpen = !isOpen; // 切换状态

  // 设置下一次切换的时间间隔，这里设置为3秒
  setTimeout(toggleMouthState, 3000);
}

// 开始动画
toggleMouthState();

吃东西.gif

五、码上代码🔗

六、祝福语 📜

🌕但愿情长久，共赏月下饼🥮

🍩甜蜜似月光，幸福伴身旁！🥰

🫰中秋快乐！🫶

中秋专题：🌕但愿人长久，一起吃月饼🥮