首页 > 其他分享> 文章详细

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

2022-09-10 02:03:46 阅读：214 来源： 互联网

标签：动画守则挑战 100% 背景 div 掘金 20px 背景图片

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

我朋友的故事

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

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

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>  
 复制代码

故事的结局

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

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

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

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

标签：动画,守则,挑战,100%,背景,div,掘金,20px,背景图片
来源： https://www.cnblogs.com/amboke/p/16675868.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9