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

介绍

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!

评论 39

  • 用户7867308212286 11月2日 22:27

  • 好学大锅烩 11月2日 22:16

  • 烂仔新 11月2日 21:53

    转发了

  • huntliu 11月2日 21:49

    UI

  • FatSand 11月2日 21:31

    为什么叫泰坦尼克

  • 举哥造轮子 11月2日 21:11

    能免费用么?

  • 汤有江 11月2日 21:05

    很好

  • jvscr 11月2日 21:02

    留着备用!

  • 用户4994684307474 11月2日 21:00

    转发了

  • l似枯木似落花 11月2日 20:59

    转发了

  • 苏州打工晓王 11月2日 20:56

    转发了

  • 山楂树60750966 11月2日 20:55

    转发了

  • RenewJim 11月2日 20:55

    不错

  • 老曹-互联网技术开发 11月2日 20:47

    转发

  • MrWu66765356 11月2日 20:39

    转发了

  • kili3 11月2日 20:34

    转发了

  • niew926 11月2日 20:07

    转发了

  • 陈小百亿与互联网 11月2日 19:51

    漂亮呀!

  • 最美分享Coder 11月2日 19:31

    为设计师和前端量身打造,200个动画图标,可以让玩也更具视觉吸引力

  • 麦子胖了 11月2日 19:30

    转发了

今日热门