共计 1744 个字符，预计需要花费 5 分钟才能阅读完成。
大家可能晓得，不久前 twitter 换了一个新 logo，从蓝色小鸟变成了一个“x”，如下
不聊其余的，看看如何用 CSS 突变来绘制这样一个图形
一、x 的绘制
整个 logo 是一个镂空的“x”形态，先不思考镂空局部，如何绘制实心的“x”呢
突变有 3 种，线性突变、径向突变和锥形突变。很显然，x 能够看成是两端歪斜的线段，用线性突变就足够了。
假如 HTML 构造是这样，一个 x 元素
<x></x>用字号来管制尺寸大小
x{
display: inline-block;
font-size: 200px;
width: 1em;
height: 1em;
}而后通过线性突变绘制一条斜线，其实就是 通明→纯色→通明 的突变，留神这里的角度关系，示意如下
用代码实现就是
x{
/**/
background: linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0);
}能够失去一条歪斜的线段
用同样的形式绘制另一个方向上的
x{
/**/
background: linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0),
linear-gradient(52deg, #0000 44%, currentColor 0 56%,#0000;}这样就失去一个“x”
二、镂空的实现
提到镂空，你应该想到 CSS mask。
遮罩的原理很简略，在遮罩图像下，只显示不通明的局部，通明的局部会被裁剪，半透明以此类推，示意如下
对于遮罩，这个技巧十分实用，之前在多篇文章中都有用到，有趣味的能够回顾一下
- 一个有意思的 CSS 图片 hover 成果
- CSS 如何实现羽化成果？
- 别用图片了，CSS 遮罩合成实现带圆角的环形 loading 动画
- CSS mask 实现鼠标追随镂空成果
- CSS 实现 Chrome 标签栏的技巧
- CSS 实现优惠券的技巧
在这里，因为只须要挖空一小部分，所以这部分是通明的，而其余局部都是不通明的，示意如下
那么问题来了，如何绘制这样一个遮罩图呢？
这种状况下，应该反过来思考，外面的斜线和后面的线性突变基本一致，只是这部分当初是镂空的。因而，这里须要用到遮罩合成：mask-composite，和设计软件中的图形运算十分类似。
所以，下面的遮罩图形能够拆分为以下两个局部
用代码实现就是
x{
/**/
-webkit-mask: linear-gradient(red 0 0),
linear-gradient(52deg, #0000 48%, red 0 52%,#0000 0) 0/100% 90% no-repeat;
-webkit-mask-composite: xor;
}这样就实现了 twitter 的新 logo
因为背景色是追随文字色彩的，所以更换 logo 色彩也十分不便
x{color: royalblue}成果如下
残缺代码如下（不到 10 行）
x{
display: inline-block;
font-size: 200px;
width: 1em;
height: 1em;
background:
linear-gradient(52deg, #0000 44%, currentColor 0 56%,#0000 0),
linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0);
-webkit-mask: linear-gradient(red 0 0),
linear-gradient(52deg, #0000 48%, red 0 52%,#0000 0) 0/100% 90% no-repeat;
-webkit-mask-composite: xor;
}你也能够拜访以下在线链接：
- CSS twitter (codepen.io)’)
三、总结一下
非常简单、十分轻松的一篇分享，置信能够给大家带来一些启发，上面总结一下绘制要点：
- 简单的图像先拆解，先实现简略的局部
- x 能够看成是两端歪斜的线段，用线性突变绘制即可
- 看到镂空，应该想到 CSS 中的遮罩
- 有些反向遮罩不好实现，能够思考用遮罩合成，和设计中的图形运算十分类似
- CSS 实现的益处是能够随便更换色彩
当然理论的 logo 不可能用这种形式去绘制啦~ 这里只是提供一种 CSS 思路，锤炼一下 CSS 绘制的能力。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
