持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
前言
今天找 UI 要图标，UI 抱怨连连的，说要是我能自己画就好了，她也能轻松点。我一听这不行啊，我会画图标的话还要她干啥，她摸鱼耽误老板换法拉利了怎么办，但是出于人文关怀我还是尝试着写了几个，争取让她早日下岗。
1. 位置信息
位置信息用于开启定位，一般是水滴形的。
效果预览
思路分析
这个位置信息的图标可能大家第一眼有点看不出来，实际上它是一个 3 个边都是 50% 的圆角的正方形 。
还是不懂？没关系，我们看看图：
这么看就简单了，我们设置正方形的三个角的 border-radius 为 50%，注意如果有边框的话，我们要把边框的宽度加上。
width: 30px;
height: 30px;
border-radius: 16px 16px 16px 0;
transform: rotate(-45deg);
这样水滴形状就画好了，水滴里面的圆可以使用伪元素 ::after 进行添加，然后通过绝对定位 absolute 的方式将它移至正中间。
由于这里我们用到了绝对定位，因此不能通过 flex 布局 水平垂直居中了，但是也有更方便的方式，你还记得怎么通过 定位 + translate 的方式进行 水平垂直居中 吗？
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
通过 top: 50% 和 left: 50% 后，元素不会如我们预期移至正中央：
因此需要 translate(-50%, -50%) 将圆水平方向和垂直方向都“扯回”半个身位。
2. 震动
震动是个好东西，人人都该拥有它。震动就是“嗡嗡嗡”，重在怎么体现震动。
效果预览
思路分析
.shock::before {
content: '';
position: absolute;
top: 20px;
left: -30px;
width: 40px;
height: 8px;
background:linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),
linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
background-size: 1em 1em;
background-repeat: repeat-x, repeat-x;
transform: rotate(90deg);
}
震动的两条波浪线，可以通过 线性渐变 实现。
我们将两个相反的线性渐变进行 横向平铺 ，重复多个，然后遮住另一半就可以实现震动的样式啦。
3. 免打扰
免打扰一般会是月亮图标，当然也有静音式样的。
效果预览
思路分析
实际上难点就是这个月亮图标了，很多人以为只能一步到位的画圆，实际上我们可以通过两个圆进行叠加，通过一些 hack 手段实现效果，我们看看示意图：
一个黄色的小圆和一个灰色的大圆进行叠加，此时由于大圆是灰色的，因此明显的能看出实现原理，那如果灰色大圆是白色的呢？是不是就天衣无缝了。
4. 悬浮导航
悬浮导航一般是手机状的，至于长啥样那真是各种各样，我手机的悬浮导航图标是长下图这样的，有没有和我一样的小伙伴？
效果预览
思路分析
这个图标难点就在圆弧的绘制，有的小伙伴可能平时没有画过，一时半会不知道怎么实现，实际上它就是一个 背景色和底色相同的半圆 ，给它加上 一部分 边框实现的。
有的小伙伴会说：啊，半圆我也不会画啊！
行行行，我教我教。
实际上我们平时 border-radius: 50% 的写法都是缩写，这个大家懂吧？不懂的看图，画图老费劲了。
那如果我们要得到一个半圆，是不是让另一半圆消失就行了？怎么消失呢？很简单，把它们的 y 轴半径变成 0 就好了。
height: 6px;
width: 10px;
border-radius: 50% / 100% 100% 0 0;
border: 3px solid grey;
知道怎么画半圆后，我们通过 伪元素 ::before 画半圆，通过 伪元素 ::after 画点，通过绝对定位的方式移到指定位置，就大功告成啦。
5. 屏幕录制
想当前，屏幕录制是没有快捷入口的，想要进行屏幕录制特别麻烦，不得不说这个东西真好用。屏幕录制一般是个摄像机的样子。
效果预览
思路分析
屏幕录制图标的难点实际上就一个 —— 圆角梯形。是真的头疼，但是也不是没有办法。
多的不说，看图，一图胜千言。
没错，还是 hack 手段，反正用户也看不出。
6. 手电筒
手电筒就是个手电筒，玩成花也是手电筒样。
效果预览
思路分析
难点还是圆角梯形，圆角梯形的画法上一条提到了，不再赘述。
手电筒柄的椭圆可以通过 长方形 + 圆角 实现，圆中圆是通过伪元素定位实现的。
7. 扫一扫
扫一扫大家都不陌生吧，看吐了都。
效果预览
思路分析
一开始看到这个图标头有点大，但是知道原理后就容易多了。
那剩余中间一个扫描线定位一下就完事了，记得用上面提到的 absolute + translate ，OK？
8. 录音机
录音机是个好东西，人人都该拥有它。一般的录音机图标是个音频频率式样的，不知道小伙伴们的长啥样？
效果预览
思路分析
这。。录音机图标啊，就是长短不一的圆角长方形，我们唯一能给它点属性加持的，就是通过 CSS 变量 来做了。
<div class="recorder">
<div style="--lens: 1"></div>
<div style="--lens: 3"></div>
<div style="--lens: 5"></div>
<div style="--lens: 4"></div>
<div style="--lens: 3"></div>
<div style="--lens: 2"></div>
</div>
给每条线都加上个 变量 ，然后 CSS 部分通过类名匹配到所有该标签，统一进行样式处理。
.recorder div {
width: 4px;
height: calc(var(--lens) * 5px);
background-color: grey;
border-radius: 2px;
}
有的小伙伴会说：啊，我直接 6 个样式跨跨写来写不是也行吗，又不多。
话虽如此，但是以后我不要 6 根了，我只要 5 根，或者我要 7 根，是不是又要改 CSS 代码 又要改 HTML 代码了？
通过 CSS 变量的方式就不会有这种顾虑，除此之外，CSS 变量的用武之地多的很。
9. 深色模式
这个图标我一看到就觉得眼熟。开玩笑，我一看到就想起了 mix-blend-mode:difference 属性，为啥记得这么清楚呢，因为那天我上班路上刷文章刷到的，当天写主题切换就用上了，美滋滋。
效果预览
这里用到了一个特殊的属性：mix-blend-mode:difference 。
mix-blend-mode:difference 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。
关于 mix-blend-mode:difference 的更多用法，我推荐大家一篇文章：
谈谈一些有趣的 CSS 题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode - 掘金 (juejin.cn)
10. 超级省电
不知道大家平时有没有用过超级省电？反正我没用过。
效果预览
思路分析
超级省电图标的难点闪电的绘制，不得不说这个闪电真难画。我们看看图：
闪电都画好了，电池就是两个 圆角长方形 而已。
码上掘金
结束语
最后的最后，梦醒了，醒来时，我的嘴角还带着笑，人有点恍惚，猛地，我瞪大了眼睛 —— 原来我们家没有 UI。哦，世间悲欢与我无关，我只觉得他们吵闹。
本文就到此结束了，希望大家都有 UI 💪💪。
如果文中有不对的地方，或是大家有不同的见解，欢迎指出 🙏🙏。
如果大家觉得所有收获，欢迎一键三连💕💕。
