前端的开发过程中，需要用到大量的图片，当使用这些图片一段时间后，会发现这个过程是千篇一律的，设计，切图，适配。当然，许多人也喜欢用字体图标。时间久了，这很枯燥，作为一个前端，不就是喜欢折腾吗？不折腾不舒服斯基，那么这次就来尝试用纯css绘制动画线性icon吧。

当我第一次使用纯css线性icon的时候，那感觉就像呼吸到了新鲜空气一般，它的高可扩展性、易使用、加载速度快的特定给我留下了非常深刻的印象。

线性图标使用了什么技术呢？

其实很容易猜到，它使用了svg技术。整个开始过程其实是把svg放到一个背景中，然后用一张线性渐变的背景覆盖在上方，然后使用css的mix-blend-mode的属性来裁剪、混合。最后线性渐变背景的混合模式设置为mix-blend-mode: screen后，线性渐变会渐渐消失在白色背景上。这就形成了我们的渐变图标。

下面是具体的代码实现：

一、编写背景样式

背景图可以是亮的或是暗的，如果是暗背景，那渐变层需要设置mix-blend-mode: multiply，如果背景图是亮的，那渐变的混合属性需要设置为mix-blend-mode:screen，下面，我们选择一个亮的背景：

二、添加线性图标

<divclass="icon-background"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 50 62"><rectx="19"y="6"width="12"height="4"/><rectx="1"y="38"width="48"height="4"/><linex1="25"y1="1"x2="25"y2="6"/><linex1="25"y1="42"x2="25"y2="58"/><lineclass="cls-1"x1="38"y1="42"x2="44"y2="61"/><linex1="12"y1="42"x2="6"y2="61"/><linex1="8.53"y1="53"x2="41.47"y2="53"/><polygonpoints="3 38 16.75 25.99 24.59 31.99 36.92 20 47 29.82 47 37.98 3 38"/><circlecx="14"cy="18"r="3"/><polygonpoints="31 8 31 10 19 10 19 8 3 8 3 38 47 38 47 8 31 8"/></svg></div>

svg的颜色需要设置为黑色：

svg{ color:#000; position:relative; opacity:.9; width:100%; height:100%; display:block; transition:transform .3s ease;}

三、制作渐变层

该层需要紧跟着icon层，并且需要设置渐变属性

四、添加动画效果

该步骤非常简单，只要使用keyframes并配以旋转动画即可。