持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

前情提要

我之前参加创意大赛的时候做了一个按钮切换的功能，当时写完发现不够完美。

因为我后来思索，如何切换才能更加丝滑，然后就想到，切换的两个按钮图案由一组元素组成，通过样式控制。最近正好看到一组可爱的简笔画表情包，正好拿来试一试。

于是，我用CSS实现了一组假期专属表情。

完整效果

功能简介

开心和开摆两个表情。一个靠左，一个靠右。

点击按钮，按钮可以左右停靠。分别展示左右两个不同的按钮，以及停靠侧文字高亮。

这次丝滑了好多。

code.juejin.cn/pen/7150088…

凹陷风格

实现凹陷的方式挺多的，最常见的是内阴影或叠加元素的色差。

我一般是两种方式交叉使用，因为有时候内阴影的值不好控制。

这里是用内阴影实现的。

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);

简笔画

简笔画需要抓住事物的特点，比如我之前画猫爪，它的特点是肉垫，画凯蒂猫，特点是胡须和三角耳朵。

本次画表情，表情的异同，大部分在于眼睛和嘴的差异，偶尔辅助手部动作或者两腮。

开心的表情，嘴部会因为微笑幅度比较大，再加点腮红表示开心时红扑扑的小脸。

开摆的表情，这个表情因人而异，且取决于当时的心情。我把眼睛都画在了一侧，嘴部画成了一个吐舌头动作，整体感觉就是搞笑又有些滑稽。

两个表情的结构是一样的，剩下的就交给CSS完成了。

<div class='expression left' id='expression'>
  <div class='eye eye1'></div>
  <div class='eye eye2'></div>
  <div class='mouth'></div>
  <div class='blush blush1'></div>
  <div class='blush blush2'></div>
</div>

丝滑切换

默认时，按钮在左侧，是开心的表情。所以默认情况设置开心的样式。

当按钮切换到右侧的时候，只需要设置表情不同部分的样式。

而不同的部分，通过伪元素就能实现。

• 眼睛外部，是一圈椭圆，椭圆基本就是宽高的值不同。
• 嘴巴的吐舌头，在原来基础上加了一个竖直的线，线要短于嘴巴从长度。

切换完成，相当丝滑。

.right .eye::after {
  content: '';
  width: 12px;
  height: 5px;
  background: transparent;
  border-radius: 100%;
  position: absolute;
  left: -8px;
  top: 0;
  border: 2px solid #000;
}
.right .eye1 {
  left: 16px;
}
.right .eye2 {
  right: 10px;
}
.right .mouth {
  top: 35px;
}
.right .mouth::before {
  content: '';
  width: 2px;
  height: 8px;
  background: #000;
  border-radius: 2px;
  position: absolute;
  top: -1px;
  left: 3px;
}

未完待续

按钮切换3.0我还没什么方向，等我再找找灵感。

但是表情包我收集了一套，大概20+个不同的表情，等我研究一下，看要不要来个表情包连连看。