按钮图标

仿Android样式扁平风格图标插件

阿里云

Flatify 是一款可以制作安卓(Android)样式的 Material-Design 扁平风格图标的 jQuery 插件。它小巧实用,通过简单的设置,就可以制作出多种扁平风格的图标。

使用方法:

使用该扁平风格图标插件需要引入 jQuery 和 flatify.js 文件。插件演示中使用了 font-awesome 字体图标。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="/path/to/font-awesome.min.css">                
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/flatify.js"></script>

该插件的 CDN 加速地址为:

  1. https://cdn.rawgit.com/n3x0/Flatify/master/flatify.js

HTML 结构:

通过 font-awesome 字体图标的标准 HTML 结构来创建图标。

  1. <i id="twitter" class="fa fa-twitter"></i>

初始化插件:

要将 font-awesome 字体图标转换为一个扁平风格的图标,可以像下面一样初始化插件。

  1. $('#twitter').flatify({
  2.   'r':101, // red
  3.   'g':159, // green
  4.   'b':203 // blue
  5. });

生成带长阴影效果的扁平图标的初始化方式如下:

  1. $('#twitter').flatify({
  2.   'r':101,
  3.   'g':159,
  4.   'b':203,
  5.   's':35,
  6.   'a':0.7,
  7. });

配置参数:

该扁平风格图标插件有如下一些可用的参数。

'r':取值 0-255,组成图标 RGB 颜色的 R 值

'g':取值 0-255,组成图标 RGB 颜色的 G 值

'b':取值 0-255,组成图标 RGB 颜色的 B 值

'f':取值 0-∞,图标的字体大小

'w':取值 30-∞,图标的宽度

'c':取值 0-50,图标的圆角百分百

's':取值 0-100,图标阴影的数量

'a':取值 0-1,图标阴影的透明度

仿 Android 样式扁平风格图标插件

已有 425 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!