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

我与老友的故事

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

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

一组纯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开发的谈天布景图,协助防止发错音讯的为难