赏秋赏月赏桂花

八月桂花香，黄橙橙的桂花，挂在枝头，不仅漂亮，可以做点心🍮，也可以泡茶🍵。

中秋赏桂花，这个意境听着不错。该怎么形容呢？形容不出来，我画出来，供大家感受一下。

桂花留晚色,月影淡秋光

月上枝头 🌕

听说给圆圆的月亮加一个模糊效果，它会更灿烂。

于是我给元素加上了filter属性，drop-shadow帮助设置阴影，blur帮助添加高斯模糊效果。

.moon {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  background: #ffe8b0;
  position: absolute;
  top: 10px;
  right: -10px;
  filter: drop-shadow(0 0 10px #e9dab1) blur(1px);
}

桂香扑面 🌼

画桂花是最费时间的，桂花好看是真好看，但是花瓣小也是真小，偏偏一开一大片。但是不开这一片，又达不到惊艳的效果。

所以考验耐心的时候到了，我最后画了50多朵桂花。花是一样的，四片花瓣，两个带圆弧的矩形就可以实现。但是位置不同，花开的角度不同，颜色深浅不同。

• 颜色深浅不同，为淡色的花朵加上样式light即可。
• 花开的角度不同，通过transform属性设置rotate旋转角度即可。

.flower {
  width: 24px;
  height: 8px;
  position: absolute;
  z-index: 19;
  transform: rotate(29deg);
  border-radius: 10px;
}
.flower::before,
.flower::after {
  content: '';
  width: 24px;
  height: 8px;
  position: absolute;
  border-radius: 10px;
  background: #efc16e;
}
.flower::after {
  left: 2px;
  transform: rotate(90deg);
}
.flower.light::after,
.flower.light::before {
  background: #efd9a8;
}

风起秋千荡 🎐

没错，有秋千的地方，怎么能没有风呢。有风的时候，秋千怎么能不荡漾呢。

荡秋千的效果，transform帮助实现倾斜效果，animation动画帮助搞定荡漾的姿态。

咳咳，各单位注意，因为秋千是倾斜的，所以荡起来的时候也要随之旋转，别忘了用rotate设置旋转角度。

.qiuqian {
  width: 111px;
  height: 240px;
  border-left: 6px solid #8b847e;
  border-right: 6px solid #8b847e;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-10deg) translateX(82px) translateY(63px);
  animation: qiuqian 4s ease-out infinite 1.5s;
}
@keyframes qiuqian {
  0% {
    transform: rotate(-10deg) translateX(82px) translateY(63px);
  }
  50% {
    transform: rotate(-20deg) translateX(106px) translateY(99px);
  }
  100% {
    transform: rotate(-10deg) translateX(82px) translateY(63px);
  }
}

花落杯中一盏茶 🍵

桂花落到茶杯里面，茶就成了桂花茶。

茶杯🍵

• 茶杯的杯口是个椭圆，一般平面图形想要立体效果，可以通过将原本的图形压扁，一组合，就有立体效果了；
• 茶杯的杯体，我喜欢钟形杯，顾名思义形状像钟，不过是倒过来的，杯口略外张，杯型偏高，腹部圆润。想要实现这个形状，首先实现一个矩形，然后将底部的两个角设置成有弧度就行，妥帖；
• 茶杯的底座是个小点的矩形。

.teacup {
  width: 40px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  right: 55px;
  z-index: 1;
}
.teacup-lid {
  width: 40px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background: #bececd;
  border: 1px solid #5d686a;
  z-index: 29;
}
.teacup-inner {
  position: absolute;
  width: 40px;
  height: 28px;
  border-radius: 0 0 18px 18px;
  left: 0;
  top: 10px;
  background: #bececd;
  border: 1px solid #5d686a;
  z-index: 19;
}
.teacup-bottom {
  position: absolute;
  width: 16px;
  height: 4px;
  border-radius: 0 0 2px 2px;
  left: 12px;
  top: 37px;
  background: #bececd;
  border: 1px solid #5d686a;
}

桂花落

这朵桂花飘落的效果，我做了以下几个设计。

• 锁定一朵花，为它添加animation属性；
• 飘落就是从一个坐标移动到另外一个坐标，第二个坐标就是杯子顶部的位置；
• 为了动画丝滑，飘到杯口的时候，渐隐小时。渐隐效果通过给桂花不同的透明度实现的。1、0.7、0.4、0，这四个透明度，实现了花瓣渐隐的效果。

.flowerSec-213 {
  left: 244px;
  top: 10px;
  animation: flowerSec213 8s ease-out infinite 1.5s;
  opacity: 1;
  z-index: 999;
}
@keyframes flowerSec213 {
  0% {
    left: 244px;
    top: 10px;
    opacity: 1;
  }
  70% {
    left: 500px;
    top: 160px;
    opacity: 1;
  }
  74% {
    left: 500px;
    top: 163px;
    opacity: 0.7;
  }
  78% {
    left: 500px;
    top: 166px;
    opacity: 0.4;
  }
  82% {
    left: 500px;
    top: 160px;
    opacity: 0;
  }
  85% {
    left: 500px;
    top: 160px;
    opacity: 0;
  }
  95% {
    left: 244px;
    top: 10px;
    opacity: 0;
  }
  100% {
    left: 244px;
    top: 10px;
    opacity: 1;
  }
}

月饼似是桂花馅 🥮

这个月饼我为了实现它的立体感，于是给它设置了阴影效果，但是设置之后发现有点像布丁。

我又观察了一下月饼的形状，又给它加了几笔线条，加完瞬间感觉点睛了。

月饼上没写名字，加了朵桂花，表示馅料是桂花馅的。

.mooncake {
  width: 38px;
  height: 18px;
  border-radius: 100%;
  border: 1px solid rgba(93, 107, 106, 0.2);
  background: #edce8d;
  box-shadow: 0px 6px 0px 0px #eac380, 0px 12px 0px 0px #e1c78a, 0px 12px 0px 1px rgba(93, 107, 106, 0.2);
  z-index: 99;
  position: absolute;
}
.mooncake-line {
  width: 1px;
  height: 10px;
  position: absolute;
  background: rgba(93, 107, 106, 0.2);
}

彩蛋

秋千上有一只小兔子🐰，根据耳朵不难发现兔子对着月亮的方向。这在中华神话故事里叫做“玉兔望月”。我来讲一下这段故事（故事内容来自网络）：

后续

我的绘画兴趣被勾起来了，我准备下期画二十四节气系列。白露刚过，暑热渐消，宜吃龙眼，喝秋茶。