我正在参与「码上挑战赛」详情请看：码上挑战赛来了！

我与老友的故事

我老友，人美心善，便是干事有点小迷糊。这不，她最近好几次差点音讯发错群。主要是群太多，欠好区分。

所以，我准备想个法子，省得她一不小心，变成大型社死现场。

一组纯CSS开发的谈天布景图，协助防止发错音讯的为难

2小时之后

一组纯CSS开发的谈天布景图，协助防止发错音讯的为难

来自网友的智慧

网友供给了一组谈天布景图，右上是群分类，几种分类，我挑了三个很合适老友的：交流群、作业群、摸鱼群。

文字在图片右侧，自己没讲话，就能很清楚的看到文字。还有一群心爱的小动物，为布景图增加了一丝兴趣。

一组谈天布景图

上作用

先来看最终完成的作用

一张布景图

从上面的代码展现中不难发现，整个布景图左边是很空旷的。由于群聊里，一般其他人的讲话在屏幕的左边，自己的讲话在右侧，所以没有讲话之前，可以很清晰的看到右侧的布景信息。而布景图的右上角是当前群的类型名，根本打开群聊，一眼就发现布景图上的文字了。

笔直书写形式

文字的笔直书写形式是经过CSS供给的writing-mode完成的。

writing-mode界说了文本在水平或笔直方向上如何排布。

以下知识点来自菜鸟教程

参数 描述
horizontal-tb 水平方向自上而下的书写方法。即 left-right-top-bottom
vertical-rl 笔直方向自右而左的书写方法。即 top-bottom-right-left
vertical-lr 笔直方向内内容从上到下，水平方向从左到右
sideways-rl 内容笔直方向从上到下摆放
sideways-lr 内容笔直方向从下到上摆放

布景图中文字的作用便是为文本设置了writing-mode特点值为vertical-rl。

.chat-title {
  writing-mode: vertical-rl;
  font-size: 32px;
  font-weight: 600;
  position: absolute;
  top: 80px;
  right: 0;
}

一组卡通形象

文字下面是一组心爱的卡通形象。我摸了摸下巴，感觉是可以用CSS完成的。

小鸡

小鸡图形由这以下部分组成：

头、一只眼睛、嘴巴、左手臂、右手臂

根本都是用圆和椭圆组成的，全体色彩是黄色的，除了鼻子规划成了橘色，根本没有什么完成难度。

注：温馨提示，假如有四肢的卡通形象，假如后面没有遮挡物，最好把身体画出来。

熊猫

熊猫图形由这以下部分组成：

头、脸、左眼睛、右眼睛、左腮红、右腮红、鼻子、嘴巴、左耳朵

除了嘴巴根本都是用圆和椭圆组成的，全体色彩是黑、白色，除了腮红规划成了粉色，根本没有什么完成难度。

说说嘴巴的完成吧。

一些卡通形象或许颜文字中，会有向下的尖括号代表嘴巴，比如(╥╯^╰╥)、(〒︿〒)、╭(╯^╰)╮。一般表明不高兴或许傲娇。而这儿的熊猫全体是有些高冷的，所以嘴巴没有规划成羊羔或许青蛙那样张开的。

这种类型的嘴巴用CSS完成很简单，有几种方法，我一般是用两个直线，结合定位+旋转完成。

.panda-mouth {
  width: 3px;
  height: 5px;
  background: #000001;
  border-radius: 2px;
  position: absolute;
  top: 19px;
  z-index: 199;
}
.panda-mouth-left {
  left: 16px;
  transform: rotate(20deg);
}
.panda-mouth-right {
  left: 20px;
  transform: rotate(-30deg);
}
<div class="panda-mouth panda-mouth-left"></div>
<div class="panda-mouth panda-mouth-right"></div>

青蛙

青蛙图形由这以下部分组成：

头、左眼睛、右眼睛、鼻子、嘴巴、舌头、左手臂

根本都是用圆和椭圆组成的，全体色彩是黑、白、绿色，除了舌头规划成了粉色，根本没有什么完成难度。

羊羔

羊羔图形由这以下部分组成：

头、脸、右眼睛、嘴巴、舌头、耳朵

根本都是用圆和椭圆组成的，全体色彩是黑、白色，舌头和腮红是粉色，根本没有什么完成难度。

介绍一下耳朵的完成。

一般羊的耳朵尖而长，是耷拉在脑袋两头的，所以这儿也是这样规划的，由于羊羔是侧颜，所以只需求完成一只耳朵即可。由于耳朵也是白色的，所以要展现一部分颜色深的地方好和头进行区分。

这样完成方法就有很多了，加阴影啦，运用两层元素啦，伪元素啦，都可以，我这儿用了伪元素完成的。

.sheep-ear {
  position: absolute;
  width: 20px;
  height: 40px;
  border-radius: 100%;
  background: #10140a;
  top: 8px;
  right: 5px;
  transform: rotate(6deg);
}
.sheep-ear::before {
  content: '';
  width: 20px;
  height: 39px;
  border-radius: 100%;
  background: #fff;
  position: absolute;
  top: -1px;
  left: 1px;
  z-index: 199;
}
<div class='sheep-ear'></div>

比啾

这个卡通形象眼熟，可是叫不上来名字，所以我给它起名叫“比啾”。（由于罗小黑里有一个比丢也很心爱）

比啾图形由这以下部分组成：

头、脸、左眼睛、右眼睛、左腮红、右腮红、鼻子。左耳朵、右耳朵

根本都是用圆和椭圆组成的，全体色彩是黑、粉色，脸是藕色，根本没有什么完成难度。

一组布景图

不同类型群组的布景图，除了名字不同，卡通的次序也恰当的做了调整，防止看错群。

注入魂灵

布景图是静态的，可是咱们的页面可以是动起来的。所以我为布景图注入了一丝灵动。

三个心，有距离的从第一个玩偶边上飞出来，飞一段时间消失。

我根本完成心形都是中心一个矩形、两头各一个圆形。

飞出来和消失运用animation动画完成，由于三颗心路径是一致的，所以需求设置距离时间，否则就会重叠成一个。

.chat-heart {
  position: absolute;
  left: 200px;
  top: 200px;
}
.heart {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #e64356;
  opacity: 0;
  top: 6px;
  left: 45px;
}
.heart:before,
.heart:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e64356;
}
.heart:after {
  bottom: 0px;
  left: -53%;
}
.heart:before {
  top: -53%;
  right: 0px;
  transform: rotate(45deg);
}
.heart1 {
  animation: heartfly 2s ease-out infinite 0.5s;
}
.heart2 {
  animation: heartfly 2s ease-out infinite 1s;
}
.heart3 {
  animation: heartfly 2s ease-out infinite 1.5s;
}
@keyframes heartfly {
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(35deg) translateY(-100px) translateX(-100px);
    opacity: 0;
  }
}
<div class='chat-heart'>
  <div class='heart heart1'></div>
  <div class='heart heart2'></div>
  <div class='heart heart3'></div>
</div>

故事的结束

故事的结束便是，有人更换了微信谈天布景，有人写完了一篇文章，愿友谊地久天长。

不会以为这便是结束吧，哈哈哈。

一组纯CSS开发的谈天布景图，协助防止发错音讯的为难