开源免费的Web动画图标

介绍

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


开源免费的Web动画图标

开源首页

https://github.com/icons8/titanic

如何安装使用?

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

npm install titanic-icons –save

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


在body中初始化:


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


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、以下是一个完成的示例:


都有哪些动画图标?

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


开源免费的Web动画图标

开源免费的Web动画图标

开源免费的Web动画图标

开源免费的Web动画图标

开源免费的Web动画图标

开源免费的Web动画图标

开源免费的Web动画图标

开源免费的Web动画图标

开源免费的Web动画图标

开源免费的Web动画图标

开源免费的Web动画图标

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

总结

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

未经允许不得转载:一点博客-青梅煮码-共享博客 » 开源免费的Web动画图标
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏