layui框架学习（2：颜色、图标、动画）

  B站教学视频中对Layui的颜色没有专门介绍，而Layui官方教程中虽然有颜色章节，但也只是简单介绍了基色调、辅色调、中性的颜色的概念及用途，最后说明layui 内置了七种背景色，以便用于各种元素中，如：徽章、分割线、导航等等。在GitHub的layui.css源文件中搜索了一下，与颜色有关的预设类主要包括以下几类：
  背景色

序号	预设类	说明
1	. layui-bg-red	赤
2	.layui-bg-orange	橙
3	.layui-bg-green	绿
4	.layui-bg-cyan	青
5	.layui-bg-blue	蓝
6	.layui-bg-black	深
7	.layui-bg-gray	浅

  边框色（1像素宽实线）

序号	预设类	说明
1	.layui-border-red	赤
2	.layui-border-orangee	橙
3	.layui-border-green	绿
4	.layui-border-cyan	青
5	.layui-border-blue	蓝
6	.layui-border-black	深

  字体颜色

序号	预设类	说明
1	. layui-font-red	赤
2	.layui-font-orange	橙
3	.layui-font-green	绿
4	.layui-font-cyan	青
5	.layui-font-blue	蓝
6	.layui-font-black	深
7	.layui-font-gray	灰

  按钮颜色

序号	预设类	说明
1	.layui-btn-primary	原始按钮
2	.layui-btn-normal	百搭按钮
3	.layui-btn-warm	暖色按钮
4	.layui-btn-danger	警告按钮
5	…layui-btn-checked	选中按钮
6	.layui-btn-disabled	禁用按钮

  layui内置168类图标，其所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。每个图标都有唯一的预设类，也对应有唯一的 unicode 字符。要实现下面的图标按钮效果，可以采用两种方式，如下面代码所示：

<!-- 第一种 -->
<div class="layui-btn"><i class="layui-icon layui-icon-addition"></i>新  建</div>

<!-- 第二种 -->
<div class="layui-btn"><i class="layui-icon">&#xe624;</i>新  建</div>

  Layui内置12种CSS3动画类，具体动画效果见参考文献2，本文仅介绍用法，主要是在class里面增加两个预设类，必须添加的是layui-anim，表明当前元素需要动画，然后在添加具体的动画效果预设类，也即上述12中CSS3动画类中的一种。另外如果循环动画，还需添加预设类layui-anim-loop。用法如下所示：

<div class="layui-btn layui-anim layui-anim-down layui-anim-loop"><i class="layui-icon">&#xe624;</i> 新  建</div>

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/