Layui图标库CSS3动画基础介绍

阅读须知:当前文档仅针对layui系列更新:2019-01-19 18:59:22 阅读量:7410 评论跟帖:0 文档整理编辑:Larry

layui 默认内置提供140多个字体图标,其字体库采用阿里巴巴的iconfont库,采用iconfont库的好处是 对于图标处理你只需要当作字体 通过css来控制其颜色 字体大小等属性,通过 font-class 或 unicode 多种方式来定义不同的图标,在larryms社区中也发布过关于layui字体图标的扩展教程,可以通过下方文字链接查看;本章节文档会讲述layui内置的图标与动画相关内容,更多扩展可在larryms社区或larryms专属文档中查看

温馨提示: 关于Layui的使用问题可直接在 larryms社区layui专区交流,本文档系列在后续会开启用户评论交流

点击右侧链接教程查看【LarryMS教程系列】之用户自定义layui系统字体图标库扩展方法

layui中字体图标库的使用非常简单,分为font-class和unicode两种形式,一般我们可以通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 font-class,或者在其内容上加上对应的unicode代码即可显示出你想要的图标,如下两种方式:

<i class="layui-icon layui-icon-rate"></i> //使用font-class方式 第一个class注明为使用的是layui-icon字体,第二个class即为对应图标的class名称

<i class="layui-icon"></i> //使用unicode方式,早期layui版本即使用的此种方式

//在larryms中用法类似,提供了更丰富的常用图标库,larryms中默认支持 larry-icon layui-icon fa 字体共计3000多个足够日常使用了同时还可以自定义扩展

layui内置字体图标库一共140个,如下列表所示:

备注:关于字体图标库出现跨域问题的解决方案, 由于浏览器存在同源策略,所以如果 layui(里面含图标字体文件)所在的地址与你当前的页面地址不在同一个域下,即会出现图标跨域问题。所以要么你就把 layui 与网站放在同一服务器,要么就对 layui 所在的资源服务器的 Response Headers 加上属性:Access-Control-Allow-Origin: *


  • 半星
    &#xe6c9;
    layui-icon-rate-half
  • 星星-空心
    &#xe67b;
    layui-icon-rate
  • 星星-实心
    &#xe67a;
    layui-icon-rate-solid
  • 手机
    &#xe678;
    layui-icon-cellphone
  • 验证码
    &#xe679;
    layui-icon-vercode
  • 微信
    &#xe677;
    layui-icon-login-wechat
  • QQ
    &#xe676;
    layui-icon-login-qq
  • 微博
    &#xe675;
    layui-icon-login-weibo
  • 密码
    &#xe673;
    layui-icon-password
  • 用户名
    &#xe66f;
    layui-icon-username
  • 刷新-粗
    &#xe9aa;
    layui-icon-refresh-3
  • 授权
    &#xe672;
    layui-icon-auz
  • 左向右伸缩菜单
    &#xe66b;
    layui-icon-spread-left
  • 右向左伸缩菜单
    &#xe668;
    layui-icon-shrink-right
  • 雪花
    &#xe6b1;
    layui-icon-snowflake
  • 提示说明
    &#xe702;
    layui-icon-tips
  • 便签
    &#xe66e;
    layui-icon-note
  • 主页
    &#xe68e;
    layui-icon-home
  • 高级
    &#xe674;
    layui-icon-senior
  • 刷新
    &#xe669;
    layui-icon-refresh
  • 刷新
    &#xe666;
    layui-icon-refresh-1
  • 旗帜
    &#xe66c;
    layui-icon-flag
  • 主题
    &#xe66a;
    layui-icon-theme
  • 消息-通知
    &#xe667;
    layui-icon-notice
  • 网站
    &#xe7ae;
    layui-icon-website
  • 控制台
    &#xe665;
    layui-icon-console
  • 表情-惊讶
    &#xe664;
    layui-icon-face-surprised
  • 设置-空心
    &#xe716;
    layui-icon-set
  • 模板
    &#xe656;
    layui-icon-template-1
  • 应用
    &#xe653;
    layui-icon-app
  • 模板
    &#xe663;
    layui-icon-template
  • &#xe6c6;
    layui-icon-praise
  • &#xe6c5;
    layui-icon-tread
  • &#xe662;
    layui-icon-male
  • &#xe661;
    layui-icon-female
  • 相机-空心
    &#xe660;
    layui-icon-camera
  • 相机-实心
    &#xe65d;
    layui-icon-camera-fill
  • 菜单-水平
    &#xe65f;
    layui-icon-more
  • 菜单-垂直
    &#xe671;
    layui-icon-more-vertical
  • 金额-人民币
    &#xe65e;
    layui-icon-rmb
  • 金额-美元
    &#xe659;
    layui-icon-dollar
  • 钻石-等级
    &#xe735;
    layui-icon-diamond
  • &#xe756;
    layui-icon-fire
  • 返回
    &#xe65c;
    layui-icon-return
  • 位置-地图
    &#xe715;
    layui-icon-location
  • 办公-阅读
    &#xe705;
    layui-icon-read
  • 调查
    &#xe6b2;
    layui-icon-survey
  • 表情-微笑
    &#xe6af;
    layui-icon-face-smile
  • 表情-哭泣
    &#xe69c;
    layui-icon-face-cry
  • 购物车
    &#xe698;
    layui-icon-cart-simple
  • 购物车
    &#xe657;
    layui-icon-cart
  • 下一页
    &#xe65b;
    layui-icon-next
  • 上一页
    &#xe65a;
    layui-icon-prev
  • 上传-空心-拖拽
    &#xe681;
    layui-icon-upload-drag
  • 上传-实心
    &#xe67c;
    layui-icon-upload
  • 下载-圆圈
    &#xe601;
    layui-icon-download-circle
  • 组件
    &#xe857;
    layui-icon-component
  • 文件-粗
    &#xe655;
    layui-icon-file-b
  • 用户
    &#xe770;
    layui-icon-user
  • 发现-实心
    &#xe670;
    layui-icon-find-fill
  • loading
    &#xe63d;
    layui-icon-loading
  • loading
    &#xe63e;
    layui-icon-loading-1
  • 添加
    &#xe654;
    layui-icon-add-1
  • 播放
    &#xe652;
    layui-icon-play
  • 暂停
    &#xe651;
    layui-icon-pause
  • 音频-耳机
    &#xe6fc;
    layui-icon-headset
  • 视频
    &#xe6ed;
    layui-icon-video
  • 语音-声音
    &#xe688;
    layui-icon-voice
  • 消息-通知-喇叭
    &#xe645;
    layui-icon-speaker
  • 删除线
    &#xe64f;
    layui-icon-fonts-del
  • 代码
    &#xe64e;
    layui-icon-fonts-code
  • HTML
    &#xe64b;
    layui-icon-fonts-html
  • 字体加粗
    &#xe62b;
    layui-icon-fonts-strong
  • 删除链接
    &#xe64d;
    layui-icon-unlink
  • 图片
    &#xe64a;
    layui-icon-picture
  • 链接
    &#xe64c;
    layui-icon-link
  • 表情-笑-粗
    &#xe650;
    layui-icon-face-smile-b
  • 左对齐
    &#xe649;
    layui-icon-align-left
  • 右对齐
    &#xe648;
    layui-icon-align-right
  • 居中对齐
    &#xe647;
    layui-icon-align-center
  • 字体-下划线
    &#xe646;
    layui-icon-fonts-u
  • 字体-斜体
    &#xe644;
    layui-icon-fonts-i
  • Tabs 选项卡
    &#xe62a;
    layui-icon-tabs
  • 单选框-选中
    &#xe643;
    layui-icon-radio
  • 单选框-候选
    &#xe63f;
    layui-icon-circle
  • 编辑
    &#xe642;
    layui-icon-edit
  • 分享
    &#xe641;
    layui-icon-share
  • 删除
    &#xe640;
    layui-icon-delete
  • 表单
    &#xe63c;
    layui-icon-form
  • 手机-细体
    &#xe63b;
    layui-icon-cellphone-fine
  • 聊天 对话 沟通
    &#xe63a;
    layui-icon-dialogue
  • 文字格式化
    &#xe639;
    layui-icon-fonts-clear
  • 窗口
    &#xe638;
    layui-icon-layer
  • 日期
    &#xe637;
    layui-icon-date
  • 水 下雨
    &#xe636;
    layui-icon-water
  • 代码-圆圈
    &#xe635;
    layui-icon-code-circle
  • 轮播组图
    &#xe634;
    layui-icon-carousel
  • 翻页
    &#xe633;
    layui-icon-prev-circle
  • 布局
    &#xe632;
    layui-icon-layouts
  • 工具
    &#xe631;
    layui-icon-util
  • 选择模板
    &#xe630;
    layui-icon-templeate-1
  • 上传-圆圈
    &#xe62f;
    layui-icon-upload-circle
  • &#xe62e;
    layui-icon-tree
  • 表格
    &#xe62d;
    layui-icon-table
  • 图表
    &#xe62c;
    layui-icon-chart
  • 图标 报表 屏幕
    &#xe629;
    layui-icon-chart-screen
  • 引擎
    &#xe628;
    layui-icon-engine
  • 下三角
    &#xe625;
    layui-icon-triangle-d
  • 右三角
    &#xe623;
    layui-icon-triangle-r
  • 文件
    &#xe621;
    layui-icon-file
  • 设置-小型
    &#xe620;
    layui-icon-set-sm
  • 添加-圆圈
    &#xe61f;
    layui-icon-add-circle
  • 404
    &#xe61c;
    layui-icon-404
  • 关于
    &#xe60b;
    layui-icon-about
  • 箭头 向上
    &#xe619;
    layui-icon-up
  • 箭头 向下
    &#xe61a;
    layui-icon-down
  • 箭头 向左
    &#xe603;
    layui-icon-left
  • 箭头 向右
    &#xe602;
    layui-icon-right
  • 圆点
    &#xe617;
    layui-icon-circle-dot
  • 搜索
    &#xe615;
    layui-icon-search
  • 设置-实心
    &#xe614;
    layui-icon-set-fill
  • 群组
    &#xe613;
    layui-icon-group
  • 好友
    &#xe612;
    layui-icon-friends
  • 回复 评论 实心
    &#xe611;
    layui-icon-reply-fill
  • 菜单 隐身 实心
    &#xe60f;
    layui-icon-menu-fill
  • 记录
    &#xe60e;
    layui-icon-log
  • 图片-细体
    &#xe60d;
    layui-icon-picture-fine
  • 表情-笑-细体
    &#xe60c;
    layui-icon-face-smile-fine
  • 列表
    &#xe60a;
    layui-icon-list
  • 发布 纸飞机
    &#xe609;
    layui-icon-release
  • 对 OK
    &#xe605;
    layui-icon-ok
  • 帮助
    &#xe607;
    layui-icon-help
  • 客服
    &#xe606;
    layui-icon-chat
  • top 置顶
    &#xe604;
    layui-icon-top
  • 收藏-空心
    &#xe600;
    layui-icon-star
  • 收藏-实心
    &#xe658;
    layui-icon-star-fill
  • 关闭-实心
    &#x1007;
    layui-icon-close-fill
  • 关闭-空心
    &#x1006;
    layui-icon-close
  • 正确
    &#x1005;
    layui-icon-ok-circle
  • 添加-圆圈-细体
    &#xe608;
    layui-icon-add-circle-fine

在layui中并没有内置多少炫酷的动画,但提供的css3基础动画在layui的许多交互元素中发挥着重要作用,由于使用的是css3,layui的部分动画在IE8/9下是不被支持,对于需要炫酷花俏的动画,在larryms分支中有专门提供,可在demo.larryms.com中查看。下面我们一起看下关于layui中动画的使用方式:【 物不在多,有用则精 】

  layui动画的使用非常简单,直接对元素赋值动画特定的 class 类名即可 

//其中 layui-anim 是必须的,后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
// 循环动画,追加:layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

下面是layui内置提供的动画类名,数量可能有点少的样子?但正如开头所讲的,拒绝冗余花俏,拥抱精简实用。点击下述绿色块,可直接预览动画 

  • 从最底部往上滑入
    layui-anim-up
  • 微微往上滑入
    layui-anim-upbit
  • 平滑放大
    layui-anim-scale
  • 弹簧式放大
    layui-anim-scaleSpring
  • 渐现
    layui-anim-fadein
  • 渐隐
    layui-anim-fadeout
  • 360度旋转
    layui-anim-rotate
  • 循环动画
    追加:layui-anim-loop

如您页面中需要更多丰满炫酷的动画效果,可直接在larryms社区在线演示中找到由larryms提供的更多实用炫酷的CSS3动画库