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
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>通过截图大致了解，可以直接访问官方网站查看动画效果：
应客B2C电商系统商城源码支持PC+小程序+公众号+H5可打包Ap...
原生开发淘宝客App，Android+ios独立开发，全开源支持二...
应客知识付费系统在线教育平台源码+题库系统源码，PC+公众号商业授...
单商户电商系统源码部署小程序+公众号+H5+App源码...
应客教育知识付费系统源码带题库功能商业授权公众号+H5源码...
陕公网安备61019602000396 方烜律师事务所提供法律服务 | Copyright 2025 源码码网 版权所有
