开源免费的Web动画图标

青梅煮码

发布于 2023-03-13 11:07:36

7280

发布于 2023-03-13 11:07:36

文章被收录于专栏：青梅煮码

介绍

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

titanic.isInitialized（ ）

判断是否初始化成功

titanic.items

获取titanic集合

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

按索引播放titanic的动画

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

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

完成的示例：

<head>
    <!-- qmblog.cn 整理出品 -->
    <!--在整个页面中插入一次脚本 -->
    <script src="/dist/js/titanic.min.js"></script>
    <script src="/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>

<body>
    <!-- 插入一个图标-->
    <div class='titanic titanic-checkbox'></div>
    <!-- 正在初始化 -->
    <script>
        var titanic = new Titanic({
            hover: true, // 悬停时自动动画(默认为true)
            click: true // 自动动画点击/点击(默认为false)
        });
    </script>
    <!--点击可以打开这个图标-->
    <button οnclick="titanic.on(getelementById('checkbox').value)">On</button>
</body>