前因后果

我与好友道晚安，喜欢用一个带「晚安 做个美梦」文字的表情，因为喜欢这个文字。

前面做了一个送花的表情，我有些膨胀了。还有就是，有些豪言壮志，也到了该兑现的时候了。

先来摆一摆，对我嫣的那些空口大话。

• 我又要给你整活了，入秋三件套。我应该是可以画出来，等你回京带你去吃真的。
• 送给我嫣的像素小人，flag越立越多。

......

实不相瞒，以上均未果，文章列表里，徒留一个孤零零的标题。

我的灵感点很奇怪，如果喜欢一个类型，就会一段时间都很喜欢这个类型。先给我嫣安排个晚安表情，凑个数吧。

表情拆分

我们看这个表情里面是所有元素，拆分再聚合，就能实现它了。

• 幽兰的夜空。
• 一行道晚安的文字，位置在左上角。
• 随机散落的星星，忽隐忽现，一闪一闪亮晶晶。
• 一轮弯弯的月亮🌛，悬挂于半空之中，繁星环绕。
• 月亮之后是一个微笑的表情，脸颊两侧有微微的腮红，两只眼睛闪着真挚的神光。
• 天空之下是一片青绿的草地。
• 还有隐藏的彩蛋，点击表情之后会获得。彩蛋留着后面讲。

这样一拆分，就能了解怎么实现它了。最终将实现的所有部分组合起来就是上面预览的效果啦。

繁星点缀

• 我们平常抬头仰望天空的时候，星星是一个个小圆点；
• 忽隐忽现的效果，是设置了动画效果，星星的透明度从0.5到0，如此循环；
• 还有一点，星星闪光是不规则的，所以我将每个星星都做了延迟。

.star {
  width: 5px;
  height: 5px;
  background: #fef300;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  animation: star 3s linear infinite;
  opacity: 0.5;
}
@keyframes star {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
.star1 {
  left: 8px;
  top: 32px;
  animation-delay: 0.5s;
}

一轮弯月🌛

• 圆月好绘制，绘制一个圆即可。弯月的实现，我是用单侧边框实现的；
• 设置好宽高，高度要比宽度设置的大一些，效果会更贴切，背景需要设置成透明；
• 边框只设置一侧，但是宽度的数值要设置的比较大，弯月就绘制完成了。

.moon {
  width: 80px;
  height: 90px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 30px solid #fff302;
  border-radius: 100%;
  background: transparent;
  position: absolute;
  left: 35px;
  top: 26px;
  z-index: 999;
  transform: rotate(-60deg);
}

微笑表情

微笑表情在上一篇《「CSS畅想」吃了块好甜的南瓜，准备了朵好靓花送给我司食堂大厨们》实现过。眼睛、猫儿唇在这篇里都有介绍。

本篇里与之不同的是，两只眼睛中闪烁的真挚的神光，忽闪忽闪的显得很真诚。

咦，这个怎么实现呢。

其实很简单。（自问自答，有点中二）

眼睛中，设置了两个白色光点，不停来回交互换，就呈现出了忽闪忽闪的效果。

.eye-inner1 {
  top: 2px;
  left: 2px;
  width: 3px;
  height: 3px;
  animation: eyeInner1 0.5s linear infinite;
}
@keyframes eyeInner1 {
  0% {
    top: 2px;
    left: 2px;
    width: 3px;
    height: 3px;
  }
  50% {
    top: 4px;
    left: 6px;
    width: 5px;
    height: 5px;
  }
  100% {
    top: 2px;
    left: 2px;
    width: 3px;
    height: 3px;
  }
}
.eye-inner2 {
  top: 4px;
  left: 6px;
  width: 5px;
  height: 5px;
  animation: eyeInner2 0.5s linear infinite;
}
@keyframes eyeInner2 {
  0% {
    top: 4px;
    left: 6px;
    width: 5px;
    height: 5px;
  }
  50% {
    top: 2px;
    left: 2px;
    width: 3px;
    height: 3px;
  }
  100% {
    top: 4px;
    left: 6px;
    width: 5px;
    height: 5px;
  }
}

彩蛋时刻

感觉这个彩蛋可能是大家情理之内、意料之中。有星空，怎么少得了流星呢。

点击表情的时候，就会出现流星。（还等啥，许个愿吧）

• 流星的形状是一条长线，为了符合真实流星划过天空时的效果，为将流星的背景色设置了渐变，从左到右逐渐透明。
• 流星划过夜空的动画效果，是从右上侧移动到左下侧。

.meteor {
  width: 30px;
  height: 5px;
  border-radius: 3px 0 0 3px;
  background-image: linear-gradient(to right, #fff, transparent);
  position: absolute;
  z-index: 99;
}
.meteor1 {
  animation: meteor1 1.5s linear infinite;
  animation-delay: 0.4s;
  transform: translateX(113px) translateY(-15px) rotate(-40deg);
}
@keyframes meteor1 {
  0% {
    transform: translateX(113px) translateY(-15px) rotate(-40deg);
  }

  100% {
    transform: translateX(-50px) translateY(140px) rotate(-40deg);
  }
}

未完待续

晚安表情完美收工，CSS越学越好玩。希望我嫣喜欢我准备的这个表情。