首页教程开发工具正文

分享一组开源免费的Web动画图标给需要的设计师和程序员

uncle 开发工具 2025年06月7日

0 收藏 0 点赞 275 浏览 1432 个字

摘要 :

titanic是在Github上开源的一组免费的动画图标，可以将其简单的运用到网页中，而且代码及其简单，但是动画效果却很不错，动画图标和静态图标的不同之处在于它可以让你的……

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>