我正在参加“掘金挑战守则”。
我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！
我朋友的故事
我的好朋友是个心地善良的人，只是做事有点迷糊。不，她最近好几次差点发错群了。主要是因为组太多，很难区分。
所以，我打算想办法让她免于意外变成一个大型社交死亡场景。
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 版权协议，转载请附上原文出处链接和本声明
