我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！

我朋友的故事

我的好朋友是个心地善良的人，只是做事有点迷糊。不，她最近好几次差点发错群了。主要是因为组太多，很难区分。

所以，我打算想办法让她免于意外变成一个大型社交死亡场景。

2个小时之后

来自网友的智慧

网友提供了一组聊天背景图。右上角是分组分类。有几种分类。我选了三个非常适合朋友的：交流群、工作群、钓鱼群。

文字在图片的右侧，不用说话也能清楚地看到文字。还有一群可爱的小动物，为背景图片增添了一丝趣味。

一组聊天背景图片

关于效果

先看最终效果

背景图像

从上面的代码显示不难发现，整个背景图的左侧很空旷。因为在群聊中，其他人的发言一般在屏幕左侧，自己的发言在右侧，所以在说话之前，可以清楚的看到右侧的背景信息。背景图右上角是当前群的类型名称，基本打开群聊，一眼就能看到背景图上的文字。

垂直书写模式

文本的垂直书写模式是通过 CSS 提供的 writing-mode 实现的。

写作模式定义文本如何水平或垂直布局。

以下知识点来自 菜鸟教程

参数描述水平-tb 水平自上而下书写。即left-right-top-bottom vertical-rl 垂直从右到左书写。即top-bottom-right-left vertical-lr 内容从上到下垂直，从左到右水平 sideways-rl 内容从上到下垂直排列 sideways-lr 内容从下到上垂直排列

背景图片中文字的效果是将文字的writing-mode属性值设置为vertical-rl。

 .聊天标题{  
 写作模式：垂直rl；  
 字体大小：32px；  
 字体粗细：600；  
 位置：绝对；  
 顶部：80 像素；  
 右：0；  
 }  
 复制代码

一套卡通人物

文字下方是一组可爱的卡通人物。我摸了摸下巴，觉得可以用 CSS 完成。

小妞

雏鸡图形由以下部分组成：

头, 一只眼睛, 嘴, 左臂, 右臂

它们基本上由圆形和椭圆组成，整体色调为黄色。除了鼻子的橙色设计之外，实现起来基本没有难度。

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

熊猫

熊猫图由以下部分组成：

头, 脸, 左眼, 右眼, 左脸红, 右脸红, 鼻子, 嘴巴, 左耳

除了嘴巴基本上是由圆形和椭圆形组成，整体色调是黑白的，除了腮红被设计成粉红色，基本没有什么难度。

说说嘴的实现。

在一些卡通人物或表情符号中，会有向下的尖括号来表示嘴巴，如(╥╯^{╰╥)、(〒︿〒)、╭(╯}╰)╮。通常不快乐或傲慢。而且这里的熊猫整体有点冷，所以它们的嘴巴设计得不像羔羊或青蛙那样张开。

这种嘴巴用 CSS 很容易实现。有几种方法。我一般用两条直线，结合定位+旋转。

 .熊猫嘴{  
 宽度：3px；  
 高度：5px；  
 背景：#000001；  
 边框半径：2px；  
 位置：绝对；  
 顶部：19px；  
 z-指数：199；  
 }  
 .熊猫嘴左{  
 左：16px；  
 变换：旋转（20度）；  
 }  
 .熊猫嘴右{  
 左：20px；  
 变换：旋转（-30度）；  
 }  
  
 <div  class= "panda-mouth panda-mouth-left"></div>  
 < div class = "panda-mouth panda-mouth-right" ></ div >  
 复制代码

青蛙

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

头, 左眼, 右眼, 鼻子, 嘴巴, 舌头, 左臂

它们基本上由圆形和椭圆组成。整体色调为黑、白、绿。除了鞋舌设计是粉红色的，基本上没有什么难度。

羊肉

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

头, 脸, 右眼, 嘴, 舌头, 耳朵

基本上，它们由圆形和椭圆形组成。整体色调为黑白相间，舌尖和腮红为粉色。实现它基本上没有困难。

介绍耳朵的实现。

一般羊的耳朵尖而长，在头部两侧下垂，所以这里也设计了这个。因为小羊是侧面的，所以只需要实现一只耳朵。因为耳朵也是白色的，所以需要显出一部分深色来和头部区分开来。

有很多方法可以实现这一点，例如添加阴影、使用两层元素和伪元素。

 .羊耳{  
 位置：绝对；  
 宽度：20px；  
 高度：40px；  
 边界半径：100%；  
 背景：#10140a；  
 顶部：8px；  
 右：5px；  
 变换：旋转（6度）；  
 }  
 .羊耳::之前{  
 内容： '';  
 宽度：20px；  
 高度：39px；  
 边界半径：100%；  
 背景：#fff;  
 位置：绝对；  
 顶部：-1px；  
 左：1px；  
 z-指数：199；  
 }  
  
 <div  class= 'sheep-ear'></div>  
 复制代码

比啁啾

这个卡通形象似曾相识，但又叫不出名字，所以给它取名为“毕九”。 （因为一个洛小黑也很可爱）

Bijiu图由以下部分组成：

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

它们基本上由圆形和椭圆组成。整体色调是黑色和粉红色，脸是粉红色的。实现它基本上没有困难。

一组背景图像

不同类型群组的背景图片名称不同，漫画的顺序也进行了适当调整，避免误读群组。

注入灵魂

背景图像是静态的，但我们的页面可以是动画的。所以我给背景图片添加了一点活力。

三颗心不时从第一个人偶的侧面飞出，飞了一会儿就消失了。

我基本上意识到心形是中间一个矩形，每边一个圆形。

飞出和消失是使用动画动画实现的。因为三颗心的路径是一样的，所以需要设置间隔时间，否则会重叠成一个。

 .聊天心{  
 位置：绝对；  
 左：200px；  
 顶部：200px；  
 }  
 .心 {  
 位置：绝对；  
 宽度：20px；  
 高度：20px；  
 背景颜色：#e64356；  
 不透明度：0；  
 顶部：6px；  
 左：45px；  
 }  
 .心：以前，  
 .心：在{之后  
 内容： '';  
 位置：绝对；  
 宽度：100%；  
 高度：100%；  
 边界半径：50%；  
 背景颜色：#e64356；  
 }  
 .心：在{之后  
 底部：0px；  
 左：- 53%；  
 }  
 .心：之前{  
 最高： - 53%；  
 右：0px；  
 变换：旋转（45度）；  
 }  
 .心脏1 {  
 动画：heartfly 2s缓出无限0.5s；  
 }  
 .心脏2 {  
 动画：heartfly 2s缓出无限1s；  
 }  
 .心脏3 {  
 动画：heartfly 2s缓出无限1.5s；  
 }  
 @keyframes heartfly {  
 70% {  
 不透明度：1；  
 }  
 100% {  
 变换：旋转（35度）translateY（-100px）translateX（-100px）；  
 不透明度：0；  
 }  
 }  
  
 <div  class= 'chat-heart'>  
 < div 类 = 'heart heart1' ></ div >  
 < div 类 = 'heart heart2' ></ div >  
 < div 类 = 'heart heart3' ></ div >  
 </div>  
 复制代码

故事的结局

故事的最后，有人换了微信聊天背景，有人写完文章，愿友谊天长地久。

不要以为这就结束了，哈哈哈。

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接： https://homecpp.art/1609/7469/2022

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/23526/12281001