我正在参加“掘金挑战守则”。

2022/9/10 6:23:18

本文主要是介绍我正在参加“掘金挑战守则”。,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

我朋友的故事

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

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

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



这篇关于我正在参加“掘金挑战守则”。的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程