为设计师和前端量身打造，200个动画图标，让你的网页更具活力

绍

titanic是在Github上开源的一组免费的动画图标，可以将其简单的运用到网页中，而且代码及其简单，但是动画效果却很不错，动画图标和静态图标的不同之处在于它可以让你的网页更加富有活力，让产品更加具备视觉吸引力，一起来看看！

开源首页

https://github.com/icons8/titanic

如何安装使用？

安装使用及其简单，可以通过CDN或npm安装它：

npm install titanic-icons --save

将代码引入你网页的head中后：

<script src="/dist/js/titanic.min.js"></script>
<script src="/bodymovin/4.5.9/bodymovin.min.js"></script>

在body中初始化：

<script>
 var titanic = new Titanic();
</script>

这样，你就可以在HTML中使用任意位置以下标签添加图标：

<div class='titanic titanic-chat'></div>

chat可以是以下任一一种：

caps
chat
checkbox
expand
cheap
expensive
idea
mailbox
mic
no-mic
online
pause
power
shopping
smile
stop
unlock
zoom

API

1、titanic.isInitialized（）

判断是否初始化成功

2、titanic.items

获取titanic集合

3、titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()

按索引播放titanic的动画

4、titanic.on(token), titanic.off(token), titanic.play(token)

通过名称播放泰坦尼克号物品的动画

5、以下是一个完成的示例：

<head>
 <!--Inserting the scripts once for the whole page-->
 <script src="/dist/js/titanic.min.js"></script>
 <script src="/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
 <!--Inserting an icon-->
 <div class='titanic titanic-checkbox'></div>
 <!--Initializing-->
 <script>
 var titanic = new Titanic({
 hover: true, // auto animated on hover (default true)
 click: true // auto animated on click/tap (default false)
 });
 </script>
 <!--Clicking turns this icon on-->
 <button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>

都有哪些动画图标?

通过截图大致了解，可以直接访问官方网站查看动画效果：

每个人都喜欢个性鲜明的页面。通过200个动画图标包，使Web和移动用户界面更具视觉吸引力。

总结

titanic是一组丰富的动画图标，可以让你的网页极具视觉吸引力，是设计师和前端工程师的不二之选，感兴趣的可以尝试！

PS:你可以直接从官网或者Github获取，当然也可以私信本头条号关键字：“icons”，Enjoy it!

天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。

预备知识

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素主要有：

::first-letter 第一个字母的样式
::first-line 首行文字的样式
::before 元素头部添加的修饰
::after 元素尾部添加的修饰
::placeholder input的占位符样式
::selection 被选中元素的样式

我个人觉得伪元素可以解释为元素的修饰，可以为元素带来额外的附加样式，属于额外的文档结构。

伪类

用来表示无法在CSS中轻松或者可靠检测到的某个元素的状态或属性，比如a标签的hover表示鼠标经过的样式，visited表示访问过的链接的样式，更多的用来描述元素状态变化时的样式，伪类主要有：

:link
:visited
:hover
:active
:focus
:lang(fr)
:not(s)
:root
:first-child
:last-child
:only-child
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:empty
:checked
:enabled
:disabled
:target

我们利用css伪类和伪元素可以实现很多强大的视觉效果，这里我主要介绍伪元素，如果对伪类或其他css特性感兴趣，可以看看我之前的css文章，写的很全面。

正文

先看看我们用纯css实现的图标库：

当然，如果我们知道了做出如上图标的css原理，那么我们就可以实现更加丰富复杂的图形，甚至可以打造自己的图标库。接下来我会介绍实现如上图标的方式和方法，并给出部分源码，方便大家学习。

原理

我们实现如上css图标是基于伪元素的，可以利用伪元素的::before和::after和content属性来为元素添加额外视觉效果，我们在上文中也介绍了伪元素的概念和类型，接下来让我们来实现它吧～

实现箭头

思路其实就是利用元素的::before伪元素画一个三角形，用css设置span样式为一条线并进行布局定位：

// less
.arrow {
 position: relative;
 display: inline-block;
 line-height: 0;
 background-color: #ccc;
 &.arrow-hor {
 width: 16px;
 height: 1px;
 }
 &.arrow-hor.right::before {
 content: '';
 position: absolute;
 top: -4px;
 right: -8px;
 border: 4px solid transparent;
 border-left: 4px solid #ccc;
 }
}
// html
<span class="arrow arrow-hor right"></span>

这样就实现了一个指向右的箭头，我们用类似的方法也可以实现左箭头，上下箭头，实现双向箭头只需要加一个::after伪类并做适当定位就好了。

实现搜索图标

实现搜索图标实际上只需要一个圆和一根线，然后我们会用transform：ratate来实现角度倾斜，具体实现如下：

// less
.search {
 position: relative;
 display: inline-block;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 border: 1px solid #ccc;
 text-align: center;
 transform: rotate(-45deg);
 &::after {
 content: '';
 display: inline-block;
 width: 1px;
 height: 4px;
 background-color: #ccc;
 }
}
// html
<span class="search"></span>

实现头像

实现头像我们要利用before和after伪元素，分别做人物头部和身体，身体我们会用css画一个椭圆来做：

// less
.dot-pan {
 position: relative;
 display: inline-flex;
 width: 60px;
 height: 60px;
 line-height: 0;
 align-items: center;
 border-radius: 50%;
 background-color: #06c;
 transform: rotate(-90deg);
 &::before {
 content: '';
 display: inline-block;
 width: 28px;
 height: 40px;
 margin-left: -3px;
 border-radius: 50% 50%;
 flex-shrink: 0;
 background-color: #fff;
 }
 &::after {
 content: '';
 display: inline-block;
 width: 20px;
 height: 20px;
 flex-shrink: 0;
 border-radius: 50%;
 background-color: #fff;
 }
}
// html
<span class="search"></span>

实现地点图标

地点图标由一个圆和一个三角形组成，如果要做的精致一点，我们可以再用一个伪元素来做一个定点：

// less
.locate-icon {
 position: relative;
 display: inline-block;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color: #06c;
 &::before {
 content: '';
 position: absolute;
 display: inline-block;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 background-color: #fff;
 }
 &::after {
 content: '';
 margin-top: 45px;
 display: inline-block;
 border: 15px solid transparent;
 border-top-color: #06c;
 }
}
// html
<span class="locate-icon mr-20"></span>

实现微信图标

图中2个眼睛主要是用到一个伪元素加上box-shadow来实现，这样可以节约一个伪元素用来做小尾巴，至于如何实现不同形状的三角形，如果有不懂的可以和我交流，具体实现如下：

// less
.wechat-icon {
 display: inline-block;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color: rgb(68, 170, 59);
 &::before {
 content: '';
 margin-top: 14px;
 position: absolute;
 width: 4px;
 height: 4px;
 border-radius: 50%;
 background-color: #fff;
 box-shadow: 16px 0 0 #fff;
 }
 &::after {
 content: '';
 margin-top: 42px;
 display: inline-block;
 border-width: 6px 10px 6px 10px;
 border-style: solid;
 border-color: transparent;
 border-top-color: rgb(68, 170, 59);
 transform: rotate(-147deg);
 }
}
// html
<span class="wechat-icon mr-20"></span>

实现对勾图标

这里也很简单，我们用伪元素的content里放置一个勾号，然后设置颜色大小就好啦：

// less
.yes-icon {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 48px;
 height: 48px;
 background-color: green;
 border-radius: 50%;
 &::after {
 content: '✓';
 color: #fff;
 font-size: 30px;
 font-weight: bold;
 }
}
// html
<span class="yes-icon mr-20"></span>

实现眼睛（一般用于网站访问量图标）

主要是做椭圆加上一个圆形的伪元素：

.view-icon {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 58px;
 height: 36px;
 background-color: #06c;
 border-radius: 50%;
 &::after {
 content: '';
 display: inline-block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: #fff;
 }
}

导航图标

原理类似，主要思想是画两个三较形，用伪元素的三角形遮住主元素底部即可：

.gps-icon {
 position: relative;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 border-width: 30px 15px 30px 15px;
 border-color: transparent;
 border-style: solid;
 border-bottom-color: #06c;
 transform: translate(10px, -16px) rotate(32deg);
 &::after {
 position: absolute;
 bottom: -48px;
 content: '';
 display: inline-block;
 border-width: 10px 38px 30px 38px;
 border-color: transparent;
 border-style: solid;
 border-bottom-color: #fff;
 }
}

实现心形图标

原理就是用两个伪元素实现两个椭圆，旋转重合即可：

.logo-x {
 position: relative;
 display: inline-flex;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color: rgb(212, 73, 17);
 &::after {
 position: absolute;
 content: '';
 left: 10px;
 top: 12px;
 display: inline-block;
 width: 20px;
 height: 30px;
 border-radius: 50%;
 background-color: #fff;
 transform: rotate(135deg);
 }
 &::before {
 position: absolute;
 content: '';
 right: 10px;
 top: 12px;
 display: inline-block;
 width: 20px;
 height: 30px;
 border-radius: 50%;
 background-color: #fff;
 transform: rotate(-135deg);
 }
}

ps图标

这个也是用伪元素，一个伪元素用来做文字图形，一个用来做遮罩，来形成伪立体感：

.logo-ps {
 position: relative;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 50px;
 height: 50px;
 border-radius: 8px;
 background-color: rgb(15, 102, 184);
 &::before {
 position: absolute;
 content: '';
 display: inline-block;
 width: 50px;
 height: 40px;
 background-color: rgba(255, 255, 255, .1);
 }
 &::after {
 position: absolute;
 content: 'PS';
 font-size: 24px;
 display: inline-block;
 color: #fff;
 }
}

实现气泡对话框

和微信图标类似：

.logo-pp {
 display: inline-block;
 width: 150px;
 height: 50px;
 border-radius: 8px;
 background-color: rgb(68, 170, 59);
 &::before {
 content: '等你下课哦！';
 margin-top: 14px;
 margin-left: -33px;
 position: absolute;
 color: #fff;
 }
 &::after {
 content: '';
 margin-top: 42px;
 display: inline-block;
 border-width: 6px 10px 6px 10px;
 border-style: solid;
 border-color: transparent;
 border-top-color: rgb(68, 170, 59);
 transform: rotate(-147deg) translate(-12px, 6px);
 }
}

由于篇幅原因，其他的图标就不一一实现了，原理都类似，笔者之前曾利用这个方案做过一套100个图标的库，成功应用于各个项目中，由于体积小不会造成额外请求，所以更加实用，但更复杂的图形就为了方便还是建议用字体图标或者svg，base64等。

来源：https://mp.weixin.qq.com/s/PxP62LlEl0jB7cVAPMjXyg

作者：趣学前端

、眼见为实

CSS可以修改图片的颜色，没错，可以，眼见为实！您可以狠狠地点击这里：png小图标CSS赋色demo

上面的不是很黑的是原始图标，是个PNG图片，下面这个是可以赋色的：

下面，我们随意选择一个颜色，例如紫色，然后：

是不是感觉很厉害！以后设计师就不需要在提供几套颜色的图片了。

SVG, icon fonts等技术似乎也不是那么耀眼了。

二、原理其实很简单

原理其实很简单，使用了CSS3滤镜filter中的drop-shadow，drop-shadow滤镜可以给元素或图片非透明区域添加投影。

如果对drop-shadow不是很了解，建议先看看前些时间写的“CSS3 filter:drop-shadow滤镜与box-shadow区别应用”一文！

对于背景透明的png小图标而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图标了吗？

然后，我们把原始图标隐藏在容器外面，投影图标在容器中间，不见给人感觉是赋色效果了？

比方说本文的demo，如果把icon父级的的overflow:hidden去掉，原始的图标就暴露出来啦！

三、实现的时候实际有难度

原理如上面，我一开始实现的时候，以为很简单，因为分分钟可以实现自己的想法，后来发现有些天真了，Chrome浏览器怎么都显示不出来；FireFox浏览器却可以！咦，究竟发生了什么。

在Chrome浏览器下，drop-shadow有一个如下的呈现特性：

在Chrome浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。

所以，我试过：

text-indent负值隐藏原始图，无投影，失败！
clip剪裁隐藏，无投影，失败！
margin负值隐藏原始图，无投影，失败！
left负值隐藏原始图，无投影，失败！

通通不行，实现遇到了巨大的阻碍。

后来，灵光一现，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）？

于是，我就试了下曾经立下无数战功的透明边框，卧槽，又立功了，成了！

因此，下面这一个CSS声明是千万不能少的：

border-right: 20px solid transparent;

四、关于兼容性

IE13+支持，Chrome和FireFox浏览器支持，移动端iOS支持，Android4.4+支持。也就是，基本上，移动端现在可以使用这种技术了。

既节约了流量，也让我们的开发更简单，维护更方便了。

原文：https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/

在线咨询

上一篇：金九银十秋招前端必看的2023年前端高频面试题汇总（附答案）
下一篇：JavaScript中常用的输入输出语句介绍

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

为设计师和前端量身打造，200个动画图标，让你的网页更具活力

绍

开源首页

如何安装使用？

API

都有哪些动画图标?

总结

您的项目需求