---

theme: channing-cyan highlight: atelier-dune-light

---

我正在參加「碼上掘金挑戰賽」詳情請看：碼上掘金挑戰賽來了！

我與好友的故事

我好友，人美心善，就是做事有點小迷糊。這不，她最近好幾次差點消息發錯羣。主要是羣太多，不好區分。

於是，我準備想個法子，省得她一不小心，變成大型社死現場。

2小時之後

來自網友的智慧

網友提供了一組聊天背景圖，右上是羣分類，幾種分類，我挑了三個很適合好友的：交流羣、工作羣、摸魚羣。

文字在圖片右側，自己沒發言，就能很清楚的看到文字。還有一羣可愛的小動物，為背景圖增加了一絲趣味。

一組聊天背景圖

上效果

先來看最終實現的效果

http://code.juejin.cn/pen/7141285499787804685

一張背景圖

從上面的代碼展示中不難發現，整個背景圖左側是很空曠的。因為羣聊裏，一般其他人的發言在屏幕的左側，自己的發言在右側，所以沒有發言之前，可以很清晰的看到右側的背景信息。而背景圖的右上角是當前羣的類型名，基本打開羣聊，一眼就發現背景圖上的文字了。

垂直書寫模式

文字的垂直書寫模式是通過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。

js .chat-title { writing-mode: vertical-rl; font-size: 32px; font-weight: 600; position: absolute; top: 80px; right: 0; }

一組卡通形象

文字下面是一組可愛的卡通形象。我摸了摸下巴，感覺是可以用CSS實現的。

小雞 🐤

小雞圖形由這以下部分組成：

頭、一隻眼睛、嘴巴、左手臂、右手臂

基本都是用圓和橢圓組成的，整體色調是黃色的，除了鼻子設計成了橘色，基本沒有什麼實現難度。

注：温馨提示，如果有四肢的卡通形象，如果後面沒有遮擋物，最好把身體畫出來。

熊貓 🐼

熊貓圖形由這以下部分組成：

頭、臉、左眼睛、右眼睛、左腮紅、右腮紅、鼻子、嘴巴、左耳朵

除了嘴巴基本都是用圓和橢圓組成的，整體色調是黑、白色，除了腮紅設計成了粉色，基本沒有什麼實現難度。

説説嘴巴的實現吧。

一些卡通形象或者顏文字中，會有向下的尖括號代表嘴巴，比如(╥╯^╰╥)、(〒︿〒)、╭(╯^╰)╮。一般表示不開心或者傲嬌。而這裏的熊貓整體是有些高冷的，所以嘴巴沒有設計成小羊或者青蛙那樣張開的。

這種類型的嘴巴用CSS實現很簡單，有幾種方式，我一般是用兩個直線，結合定位+旋轉實現。

```js .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); }

```

青蛙 🐸

青蛙圖形由這以下部分組成：

頭、左眼睛、右眼睛、鼻子、嘴巴、舌頭、左手臂

基本都是用圓和橢圓組成的，整體色調是黑、白、綠色，除了舌頭設計成了粉色，基本沒有什麼實現難度。

小羊 🐑

小羊圖形由這以下部分組成：

頭、臉、右眼睛、嘴巴、舌頭、耳朵

基本都是用圓和橢圓組成的，整體色調是黑、白色，舌頭和腮紅是粉色，基本沒有什麼實現難度。

介紹一下耳朵的實現。

一般羊的耳朵尖而長，是耷拉在腦袋兩側的，所以這裏也是這樣設計的，因為小羊是側顏，所以只需要實現一隻耳朵即可。因為耳朵也是白色的，所以要展示一部分顏色深的地方好和頭進行區分。

這樣實現方式就有很多了，加陰影啦，使用兩層元素啦，偽元素啦，都可以，我這裏用了偽元素實現的。

```js .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; }

```

比啾

這個卡通形象眼熟，但是叫不上來名字，所以我給它起名叫“比啾”。（因為羅小黑裏有一個比丟也很可愛）

比啾圖形由這以下部分組成：

頭、臉、左眼睛、右眼睛、左腮紅、右腮紅、鼻子。左耳朵、右耳朵

基本都是用圓和橢圓組成的，整體色調是黑、粉色，臉是藕色，基本沒有什麼實現難度。

一組背景圖

不同類型羣組的背景圖，除了名字不同，卡通的順序也適當的做了調整，避免看錯羣。

注入靈魂

背景圖是靜態的，但是我們的頁面可以是動起來的。所以我為背景圖注入了一絲靈動。

三個心，有間隔的從第一個玩偶邊上飛出來，飛一段時間消失。

我基本實現心形都是中間一個矩形、兩邊各一個圓形。

飛出來和消失使用animation動畫實現，因為三顆心路徑是一致的，所以需要設置間隔時間，否則就會重疊成一個。

```js .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; } }

```

故事的結尾

故事的結尾就是，有人更換了微信聊天背景，有人寫完了一篇文章，願友誼地久天長。

不會以為這就是結尾吧，哈哈哈。