css--笔记

结构目录：

1. css reset重定义浏览器默认样式
2. 框架
   2.1 响应式栅格系统
   2.2 响应式隐藏显示
3. 基础CSS
   3.1 排版
   3.1.1 标题
   3.1.2 强调
   3.1.3 对齐
   3.1.4 定位
   3.1.5 浮动
   3.1.6 文字单行溢出省略号
   3.1.7 线条
   3.1.8 外边距
   3.1.9 内填充
   3.1.10 边框，css3圆角
   3.1.11 css3阴影
   3.1.12 行内分割竖线
   3.1.13 文字尺寸
   3.1.14 文字行距
   3.1.15 文字颜色
   3.1.16 文字颜色强调
   3.1.17 缩略语
   3.1.18 地址
   3.1.19 引用
   3.1.20 上标 下标
   3.1.21 内容样式
   3.1.22 列表
   3.1.23 描述
   3.1.24 隐藏 显示
   3.1.25 尺寸
   3.2 代码
   3.3 表格
   3.4 表单
   3.4.1 input,textarea 文本域 文本区域
   3.4.2 radio,checkbox 单选 多选
   3.4.2.1 jQuery.icheck.css
   3.4.2.2 Bootsrtap.Switch.css
   3.4.3 select 下拉框
   3.4.4 input-file 文件上传
   3.4.5 spinner 控件
   3.4.6 邮箱提示
   3.4.7 表单布局
   3.4.8 表单验证
   3.5 按钮
   3.6 图片
   3.7 图标
   3.8 动画
4. 组件
   4.1 按钮组
   4.2 导航
   4.2.1 导航条
   4.2.2 面包屑导航
   4.2.3 翻页导航
   4.2.4 顶部导航
   4.2.5 向导
   4.2.6 竖向导向tab导航
   4.2.7 横向tab
   4.3 菜单
   4.3.1 下拉菜单
   4.3.2 多级菜单
   4.3.3 树状菜单（暂无）
   4.4 幻灯片
   4.4.1 焦点图效果(自动播放，圆点控制)
   4.4.2 带缩略图效果
   4.5 选项卡
   4.6 便签与标号
   4.7 缩略图
   4.8 警告
   4.9 进度条 loading
   4.10 对话框 弹出层
   4.11 客服
   4.12 右侧悬浮工具
   4.12.1 返回顶部
   4.12.2 意见反馈
   4.13 分享
   4.14 面板
   4.15 案例
   4.16 滚动
   4.17 搜索
   4.18 广告
   4.19 标签
   4.19.1 标签输入效果
   4.19.2 标签混排效果
   4.19.3 tag云标签
   4.20 折叠
   4.21 遮罩条
   4.22 评论列表
   4.23 页脚
   4.24 星星评价
   4.25 tooltip效果
   4.26 popover效果
   4.27 datetimepicker日期插件
   4.28 sortable拖动
   4.29 ColorPicker 颜色控件
5. 页面
   5.1 404页面
   5.2 博客列表页（暂无）
   5.3 博客详情页（暂无）
   5.4 关于我们页（暂无）
   5.5 帮助列表页（暂无）
   5.6 帮助详情页（暂无）

---

CSS写作注意事项：

1. 页面编码规范

1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。
1.2. 全局字体设置：
     windows 7系统：微软雅黑 Arial；
     windows XP及以下：新宋体，宋体，Arial
     MAC默认字体：Helvetica Neue和Helvetica Hiragino Sans GB。
1.3. 中文字体使用编码转换，请参阅下节“中文字体css编码转换”
1.4. 推荐使用216web安全色

2. 属性

写在一行内，属性之间、属性名和值之间以及属性与“{}”之间应减少空格，去掉最后一个“;”，例如：.class{width:200px;height:100px}

3. 属性的书写顺序：

3.1. 按照元素模型由外及内，由整体到细节书写，大致分为五组：
  位置：position,left,right,float
  盒模型属性：display,margin,padding,width,height
  边框与背景：border,background
  段落与文本：line-height,text-indent,font,color,text-decoration,...
  其他属性：overflow,cursor,visibility,...
3.2. 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;

4. 带有前缀的属性，单独一行，通过缩进，让每个属性的值垂直对齐，方便编辑维护。
5. 谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式
6. 选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix
7. 避免使用各种 CSS Hack，如需对 IE 进行特殊定义，请参阅下节“关于 CSS Hack 的说明”
8. 勿使用冗余低效的 CSS 写法，例如：ul li a span{… }
9. 慎用 !important
10. 建议使用具有语义化的classname或id，请参阅下节“css 命名规范及对应的缩写”
    11.避免使用兼容性不好的使用滤镜
    12.开发过程中的未定事项，须用 [!] 标出，以便于后续讨论整理。
    13.注释格式，统一使用双斜杠加*。
    14.上下模块之间的间距统一使用下一个模块的margin-top来实现，好处是：如果没有下一个模块也不会多出一段空隙。
    15.hover，selected，disabled，current等具有特定意义的请勿直接占用。
    16.:link :visited :hover :active书写顺序 L-V-H-A，速记：LoVe（喜欢）HAte（讨厌）。
    17.不要使用 @import

---

中文字体css编码转换

微软雅黑 \5FAE\8F6F\96C5\9ED1 或 Microsoft YaHei
黑体 \9ED1\4F53
新宋体 \65b0\5b8b\4f53
宋体 \5b8b\4f53

关于 CSS Hack 的说明：

1. _ IE6

2. •      IE6/7
     

3. !important IE7/Firefox
4. *+ IE7
5. \9 IE6/7/8
6. \0 IE8
7. 条件hack IE7以下版本 IE7 IE8 IE8以上

---

css 命名规范

1. 内容优先,表现为辅
2. css命名中英文对照
   current 当前 hover 悬停 selected 挑选 disabled 禁用 focus 得到焦点 blur 失去焦点 checked 勾选 success 成功 error 出错

header(hd) 头部 content(cnt) 内容 title(tit) 标题 item 项目（条） cell 单元 image/pic(img) 图片 text(txt) 文字 top 顶部 scrubber 时序菜单

nav 导航 mainNav 主导航 subNav 子导航 topNav 顶部导航 breadcrumb 面包屑导航

flink 友情链接 footer 尾 copyright 版权

menu 菜单 submenu 子菜单 dropdown 下拉菜单

searchBar 搜索条 search 搜索条 searchTxt 搜索框 searchBtn 搜索按钮 search_key 搜索词

member 会员 ucenter 用户中心 loginBar 登陆条 login 登录 loginBtn 登录按钮 regsiter 注册按钮 btn-regsiter注册按钮 name 用户名 password 密码 nickname 昵称 mobilephone/mobile 手机 telephone/tel 电话 defaultavatar 默认头像

hot 热点 news 新闻 banner/AD 广告 download 下载

content 内容 title 标题 summary 摘要 time 时间

share 分享 digg 顶 like 喜欢

list/-list 列表 pList 图片列表 tList 文字列表 tpList 图文列表

table 表格 row 行 column 列 gutter 间隔 viewport 视口

tab 标签 tags 标签 scroll 滚动

sidebar 侧边栏 column 栏目 section 区块 msg 提示信息 status 状态 vote 投票 tips 小技巧 guild 指南 note 注释

icon- 图标 btn- 按钮

goods 商品 goods-list 商品列表 goods-detail 商品详情 goods-info 商品信息

tuan 团购 tuan-list 团购列表 tuan-detail 团购详情 tuan-info 团购信息

transition 动画 shadow 阴影 fade 淡入淡出 flip 翻页效 slide 滑动 slideup 上滑动 slidedown 下滑动 turn 翻页 horizontal 水平 vertical 垂直 collapsible 折叠 corners 拐角 flow 流 reverse 反向 pop 弹窗
count 总数/计数 plus 加号/正 minus 减号/负 controlgroup 控制组
----------------------------------**

html命名规范：

default/index.html 首页
404.html 404错误页
print.html 打印页
header.html 页头
footer.html 页脚
sitemap.html 网站地图
passport.html 通行证
rank.html 排行榜
roll.html 滚动新闻

solution.html 解决方案
joinus.html 加入我们
partner.html 合作伙伴
service.html 服务
aboutus.html 关于我们
contact.html 联系我们
company.html 公司介绍
organization.html 组织结构
culture.html 企业文化
strategy.html 发展策略
honor.html 公司荣誉
aptitudes.html 企业资质
events.html 大事记
business.html 商务合作
contract.html 服务条款
privacy.html 隐私声明
CSR.html 企业社会责任

news-开头.html 新闻相关
article-开头.html 资讯相关
picture-开头.html 图片相关
photo-开头.html 相册相关
product-开头.html 产品相关
goods-开头.html 商品相关
system-开头.html 系统相关
tag-开头.html tag相关
brand-开头.html 品牌相关
help-开头.html 帮助相关
member-开头.html 会员相关
search-开头.html 搜索相关
---------------------------------- */
/*1 重定义浏览器默认样式
Name: style_reset
Explain: 重定义浏览器默认样式
*/

/3.0 基础样式/

/3.1 排版/

/*3.1.1 标题

Example：
h1. 大标题小标题
h2. 大标题小标题
h3. 大标题小标题
h4. 大标题小标题
h5. 大标题小标题
h6. 大标题小标题

*/

h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1;color:inherit}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{font-weight:400;line-height:1;color:#999}
h1,h2,h3{padding-top:20px;padding-bottom:10px}
h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small{font-size:65%}
h4,h5,h6{margin-top:10px;margin-bottom:10px}
h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small{font-size:75%}
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:18px}
h5{font-size:14px}
h6{font-size:12px}

/*3.1.2 强调

Example:
这是段落，向下10像素间距
小型文本，是父容器字体大小的85%
重要文本，加粗显示
被强调的文本，斜体显示
带下划线的文本
引用
突出显示文本
带删除线的文本
预格式化的文本

*/

p{margin-bottom:10px}	/*段落*/
small{font-size:85%}	/*小型文本*/
b,strong {font-weight: bold}	/*重要的文本，加粗*/
em{font-style:italic}	/*被强调的文本*/
i{}	/*斜体*/
u{}	/*加下划线*/
cite{font-style:normal}	/*引用*/
mark{color:#000;background:#ff0}/*突出显示文本*/
var{}	/*变量*/
kbd{}	/*键盘文本*/
code{}	/*计算机代码文本*/
dfn{font-style: italic}	/*一个定义项目*/
del{font-family:Simsun}	/*删除线*/
code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em}
pre{white-space: pre-wrap}	/*预格式化的文本*/
.uppercase{text-transform:uppercase} /*文字大写*/
.lowercase{text-transform:lowercase} /*文字小写*/
.capitalize{text-transform:capitalize} /*首字母大写*/
.en{font-family:Arial!important}

/*3.1.3 对齐

Name:			style_text-align
Example:		class="text-l|text-r|text-c|va-t|va-m|va-b"
Explain:		.text-水平对齐 （.text-l左对齐|.text-r右对齐|.text-c居中对齐）
				.va-上下对齐 （.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐）

*/

.text-l{text-align:left}.text-r{text-align:right}.text-c{text-align:center}
.va *{vertical-align:sub!important;*vertical-align:middle!important;_vertical-align:middle!important}
.va-t{vertical-align:top!important}.va-m{vertical-align:middle!important}.va-b{vertical-align:bottom!important}

/*3.1.4 定位

Name:			style_position
Example:		class="pos-r|pos-a|pos-f"
Explain:		.pos-r 相对定位|.pos-a 绝对定位|.pos-f 固定

*/

.pos-r{position:relative}.pos-a{position:absolute}.pos-f{position:fixed}

/*3.1.5 浮动

Name:			style_float
Example:		class="l|r"
Explain:		.l 左浮动|.r 右浮动

*/

.l,.f-l{float:left!important;_display:inline}
.r,.f-r{float:right!important;_display:inline}

[class*="span"].r,
[class*="span"].f-r{float:right}
/*控制元素对定位的位置：居左|居右|j居上|居下*/
.pos-left{left:0; right:auto}
.pos-right{right:0; left:auto}
.pos-top{top:0; bottom:auto}
.pos-bottom{top:auto; bottom:0}

/*3.1.6 文字单行溢出省略号

Name:			style_text-overflow
Example:		class="text-overflow"

*/

.text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/*3.1.6 文字2行溢出省略号

.text-two-overflow{ overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

/*3.1.7 线条

Name:			style_line
Example:		class="line"

*/

.line{font-size:0; line-height:0; border-top: solid 1px #eee; float: none}

/*3.1.8 外边距

Name:			style_margin
Example:		class="mt-5|mt-10..."
Explain:		.mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距

*/

.mt-5{margin-top:5px}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mt-25{margin-top:25px}.mt-30{margin-top:30px}.mt-35{margin-top:35px}.mt-40{margin-top:40px}.mt-50{margin-top:50px}

.mb-5{margin-bottom:5px}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}.mb-40{margin-bottom:40px}.mb-50{margin-bottom:50px}

.ml-5{margin-left:5px}.ml-10{margin-left:10px}.ml-15{margin-left:15px}.ml-20{margin-left:20px}.ml-30{margin-left:30px}.ml-40{margin-left:40px}.ml-50{margin-left:50px}

.mr-5{margin-right:5px}.mr-10{margin-right:10px}.mr-15{margin-right:15px}.mr-20{margin-right:20px}.mr-30{margin-right:30px}.mr-40{margin-right:40px}.mr-50{margin-right:50px}

/*3.1.9 内填充

Name:			style_padding
Example:		class="pt-5|pt-10|……"
Explain:		.pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充

*/

.pt-5{padding-top:5px}.pt-10{padding-top:10px}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-25{padding-top:25px}.pt-30{padding-top:30px}

.pb-5{padding-bottom:5px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-25{padding-bottom:25px}.pb-30{padding-bottom:30px}

.pl-5{padding-left:5px}.pl-10{padding-left:10px}.pl-15{padding-left:15px}.pl-20{padding-left:20px}.pl-25{padding-left:25px}.pl-30{padding-left:30px}

.pr-5{padding-right:5px}.pr-10{padding-right:10px}.pr-15{padding-right:15px}.pr-20{padding-right:20px}.pr-25{padding-right:25px}.pr-30{padding-right:30px}

.pd-5{padding:5px}.pd-10{padding:10px}.pd-15{padding:15px}.pd-20{padding:20px}.pd-25{padding:25px}.pd-30{padding:30px}.pd-40{padding:40px}

/*3.1.10 边框，css3圆角

Name:			style-border
Example:		class="bk_gray radius"
Explain:		.bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形

*/

.bk-gray{border:solid 1px #eee}
.radius{border-radius:4px}
.size-MINI.radius{ border-radius:3px}
.size-L.radius{ border-radius:5px}
.size-XL.radius{ border-radius:6px}
.round{border-radius:50%; overflow:hidden}

/*3.1.11 css3阴影

Name:			style_shadow
Example:		class="box_shadow|text-shadow"
Explain:		box_shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。
				text-shadow 文字阴影

*/

.box-shadow{-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.text-shadow{-webkit-text-shadow:0 0 2px rgba(0,0,0,0.2);text-shadow:0 0 2px rgba(0,0,0,0.2)}

/*3.1.12 行内分割竖线

Name:			style_pipe
Example:		|

*/

.pipe{margin:0 5px;color:#CCC;font-size:10px!important}

/*3.1.13 文字尺寸

Name:			style_font-size
Example:		class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
Explain:		12px字体|14px字体|16px字体|18px字体|20px字体|24px字体|26px字体|28px字体|30px字体

*/

.f-12{font-size:12px}.f-14{font-size:14px}.f-16{font-size:16px}.f-18{font-size:18px}.f-20{font-size:20px}.f-22 { font-size: 22px }.f-24{font-size:24px}.f-26{font-size:26px}.f-28{font-size:28px}.f-30{font-size:30px}

/*3.1.14 文字行距

Name:			mod_line-height
Example:		class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
Explain:		16px行高|18px行高|20px行高|22px行高|24px行高|26px行高|30px行高

*/

.lh-16{line-height:16px}.lh-18{line-height:18px}.lh-20{line-height:20px}.lh-22{line-height:22px}.lh-24{line-height:24px}.lh-26{line-height:26px}.lh-28{line-height:28px}.lh-30{line-height:30px}
/*2.0以前的兼容版本*/
.l16{line-height:16px}.l18{line-height:18px}.l20{line-height:20px}.l22{line-height:22px}.l-24{line-height:24px}.l-26{line-height:26px}.l-28{line-height:28px}.l-30{line-height:30px}

/*3.1.15 文字颜色

Name:			style_color
Example:		class="c-primary|c-sub|c-success|c-danger|c-warning|c-333|c-666|c-999|c-red|c-green|c-blue|c-white|c-black|c-orange"
Explain:		主要颜色|次主色|强调色—成功|强调色—危险|强调色—警告色|强调色—错误色|次主色—浅黑|辅助色—灰色|标准色—红色|标准色—绿色|标准色—蓝色|标准色—白色|标准色—黑色|标准色—橙色

*/

/*全局默认链接颜色*/
body{ background-color:#fff; color:#333}
.bg-fff{ background-color:#fff}
a{color:#333}
a:hover,.active a{color:#06c}


/*主要颜色*/
.c-primary,.c-primary a,a.c-primary{color:#5a98de}
.c-primary a:hover,a.c-primary:hover{ color:#5a98de}
/*次主色*/
.c-secondary,.c-secondary a,a.c-secondary{color:#555}
.c-secondary a:hover,a.c-secondary:hover{ color:#555}

/*强调色—成功*/
.c-success,.c-success a,a.c-success{color:#5eb95e}
.c-success a:hover,a.c-success:hover{ color:#5eb95e}

/*强调色—危险*/
.c-danger,.c-danger a,a.c-danger{color:#dd514c}
.c-danger a:hover,a.c-danger:hover{ color:#dd514c}

/*强调色—警告*/
.c-warning,.c-warning a,a.c-warning{color:#f37b1d}
.c-warning a:hover,a.c-warning:hover{ color:#f37b1d}

/*强调色—错误*/
.c-error,.c-error a,a.c-error{color:#c00}
.c-error a:hover,a.c-error:hover{ color:#c00}

/*辅助色—浅黑*/
.c-333,.c-333 a,a.c-333{color:#333}
.c-333 a:hover,a.c-333:hover{ color:#333}

/*辅助色—灰色*/
.c-666,.c-666 a,a.c-666{color:#666}
.c-666 a:hover,a.c-666:hover{ color:#666}
.c-999,.c-999 a,a.c-999{color:#999}
.c-999 a:hover,a.c-999:hover{color:#999}

/*标准色—红色*/
.c-red,.c-red a,a.c-red{color:red}
.c-red a:hover,a.c-red:hover{ color:red}
/*标准色—绿色*/
.c-green,.c-green a,a.c-green{color:green}
.c-red a:hover,a.c-red:hover{color:green}
/*标准色—蓝色*/
.c-blue,.c-blue a,a.c-blue{color:blue}
.c-blue a:hover,a.c-blue:hover{color:blue}
/*标准色—白色*/
.c-white,.c-white a,a.c-white{color:white}
.c-white a:hover,a.c-white:hover{color:white}
/*标准色—黑色*/
.c-black,.c-black a{color:black}
.c-black a:hover,a.c-black:hover{color:black}
/*标准色—橙色*/
.c-orange,.c-orange a,a.c-orange{color:orange}
.c-orange a:hover,a.c-orange:hover{color:orange}

/*3.1.16 文字颜色强调 从2.0起废弃3.1.16 文字强调，字体颜色全部放入到3.1.15

Example:		class="text-muted|text-primary|text-warning|text-error|text-danger|text-success|text-info"
Explain:		柔和|重要|警告|错误|危险|成功|信息

*/

/*3.1.17 缩略语

Example:		UI
Explain:

*/

abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}
abbr.initialism{font-size:90%;text-transform:uppercase}

/*3.1.18 地址

Example:		
北京市海淀区上地……
Explain:

*/

address{display:block;margin-bottom:20px;font-style:normal;line-height:20px}

/*3.1.19 引用

Example:		
这是引用的内容
Explain:

*/

blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}
blockquote p{margin-bottom:0;font-size:17.5px;font-weight:300;line-height:1.25}
blockquote small{display:block;line-height:20px;color:#999}
blockquote small:before{content:'\2014 \00A0'}
blockquote.text-r{padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0}
blockquote.text-r p,blockquote.text-r small{text-align:right}
blockquote.text-r small:before{content:''}
blockquote.text-r small:after{content:'\00A0 \2014'}
q:before,q:after,blockquote:before,blockquote:after{content:""}
q {/*短的引用*/quotes: "\201C" "\201D" "\2018" "\2019"}

/*3.1.20 上标，下标

Example:		2	2
Explain:		上标|下标

*/

sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-0.5em}sub{bottom:-0.25em}

/*3.1.21 内容样式

Name:			style_content
Example:		
……
Explain:		内容样式

*/

.content{position:relative;font-size:17px;line-height:1.8;overflow:hidden;text-align:left;word-break: break-all;word-wrap: break-word}
.content h3{font-size:18px}
.content h4{font-size:16px}
.content p{margin-bottom: 1.5rem;text-align: justify;word-break:break-all}
.content p.text-c{ text-align:center}
	.indent{ text-indent:2em}
.content img{max-width:100%}
.content ul{text-indent:2em}
@media (max-width: 767px) {
	.content{ font-size:16px}
}
@media (max-width: 480px) {
	.content img{max-width:100%!important; height:auto!important;width:expression(this.width > 320 ? "320px" : this.width)!important}
	*html .content img{width:expression(this.width>320&&this.width>this.height?320:auto)}
}

/*3.1.22 列表

Name:			style_ulolli
Example:

	
无序列表
	
无序列表
	
无序列表


	
无序列表
	
无序列表
	
无序列表

	Explain:
*/
ul.unstyled,ol.unstyled{margin-left:0;list-style:none}
ul.inline,ol.inline{margin-left:0;list-style:none}
ul.inline > li,ol.inline > li{display:inline-block;*display:inline;padding-right:5px;padding-left:5px;*zoom:1}
.list-view > .item{ padding:10px; position:relative; overflow:hidden}/*禁止换行*/
.list-view > .item .date{font-size:12px; font-family:Arial; color:#999}
/*横向手机 竖向平板*/
@media (max-width: 767px) {
	.list-view > .item{ font-size:18px; padding:11px 15px;border-bottom: 1px solid #eee}
	.list-view > .item > a{display:block; margin:-11px -15px}
	.night .list-view > .item{border-bottom: 1px solid #1F1F1F}
	.list-view > .item .date{display:none}
	.list-view > .item .Hui-iconfont {background-size:9px auto;margin-top:-7px;position: absolute;right:15px;top: 50%}
}

/*排行榜*/
/*
1排行榜列表12
*/
.list-top > .item{padding-left: 30px}
.list-top > .item .num{ position:absolute; top:11px; display:block; width:20px; height:20px; color:#fff; background-color:#5a98de; text-align:center}

/*3.1.23 描述

Name:			style_dldtdd
Example:		
H-ui
基于Bootstrap框架的改进扩展的前端框架
Explain:		.dl-horizontal 水平描述，默认不加为垂直模式。

*/

.dl-horizontal.cl{}
.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.dl-horizontal dd{margin-left:180px}

/*3.1.24 隐藏 显示

Name: style_display
Example:

隐藏的内容

显示的内容

Explain: .hide 隐藏 / .show 显示
*/

.hide{display:none}[hidden]{display: none}
.hidden{display:none!important;visibility:hidden!important}
.f-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
[class*="span"].hide,.row-fluid [class*="span"].hide{display:none}
.show{display:block}
.invisible{visibility:hidden}

/3.1.25 尺寸 新增尺寸全局类名，用于表单、按钮、表格、头像、标签等元素上，要与元素一起配合使用，方能看到效果/

.size-MINI{}/*迷你*/
.size-S{}/*小*/
.size-M{}/*中 缺省默认尺寸，可以不写，可以理解为：均码*/
.size-L{}/*L*/
.size-XL{}/*大*/
.size-XXL{}/*加大*/
.size-XXXL{}/*超大*/

.input-text,.btn,.input-text.size-M,.btn.size-M{ font-size:14px; height:31px;*height:auto;line-height:1.42857;padding:4px}/*默认为M，可以不写，可以理解为：均码*/
a.btn,a.btn.size-M,span.btn,span.btn.size-M{ line-height:21px}
.btn,.btn.size-M{ padding:4px 12px}

.input-text.size-MINI,.btn.size-MINI{font-size:12px; height:23px;padding:1px 2px;line-height:1.42857}/*迷你*/
a.btn.size-MINI,span.btn.size-MINI{ line-height:21px}
.btn.size-MINI{ padding:1px 4px}

.input-text.size-S,.btn.size-S{font-size:12px; height:27px;padding:3px;line-height:1.42857}/*小*/
a.btn.size-S,span.btn.size-S{ line-height:19px}
.btn.size-S{ padding:3px 8px}

.input-text.size-L,.btn.size-L{font-size:16px; height:41px; padding:8px}/*大*/
a.btn.size-L,span.btn.size-L{ line-height:23px}
.btn.size-L{ padding:8px 16px}

.input-text.size-XL,.btn.size-XL{font-size:18px; height:48px; padding:10px}/*特大*/
a.btn.size-XL,span.btn.size-XL{ line-height:26px}
.btn.size-XL{ padding:10px 24px}

@media (max-width: 767px) {
	.responsive .input-text.size-MINI,.responsive .btn.size-MINI{height:24px}
	.responsive .input-text.size-S,.responsive .btn.size-S{ font-size:14px; height:30px}
	.responsive .input-text,.btn,.responsive .input-text.size-M,.responsive .btn.size-M{ font-size:16px; height:36px}
	.responsive .input-text.size-L,.responsive .btn.size-L{ font-size:18px; height:42px}
	.responsive .input-text.size-XL,.responsive .btn.size-XL{ font-size:20px; height:48px}
}

3.1.26 行列个数布局

//一排3个 左右长度固定,中间自适应

.me-line-three{
	display:  grid;
	grid-template-columns: 56upx 1fr 136upx;
	gap:24upx;
	padding-left: 32upx;
	&:not(:first-child){
		margin-top: 52upx;
	}
}

//一排4个 第2排3,4合并

.grid-seven-item{
	padding-top: 28upx;
	display:  grid;
	grid-template-areas:". . . ."
	".  . myArea myArea";
	grid-gap:26upx;
   .itemEnd {
    position: relative;
     grid-area: myArea;
   }	
}

//2排3个

.grid-six-item{
	display:  grid;
	grid-template-columns:  1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

/*3.2 代码

Name:			style_pre
Example:		,
转义过的代码
Explain:		code：行内代码，pre：基本代码块;包装代码片段，.prettyprint颜色增强/.linenums显示行号

*/

code{padding:0 3px 2px;font-family:Monaco,Menlo,Consolas,"Courier New",monospace}
pre .title,pre .keyword,pre .body,pre .des{color:#333}/*关键词*/

pre{display:block;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;padding:9.5px;margin-bottom:10px;font-size:12px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;color:#333}
.prettyprint{margin-bottom:20px;padding:8px;background-color:#f7f7f9;border:1px solid #e1e1e8}
.prettyprint .com { color: #998;font-style:italic }/*注释*/
.prettyprint .tag{color:#007}/*标签*/
.prettyprint .lit { color: #195f91}
.prettyprint .pun,.prettyprint .opn,.prettyprint .clo { color: #93a1a1}/*等于*/
.prettyprint .fun { color: #dc322f}
.prettyprint .str,.prettyprint .atv { color: #D14}/*值*/
.prettyprint .kwd,.prettyprint .prettyprint .tag { color: #1e347b}
.prettyprint .typ,.prettyprint .atn,.prettyprint .dec,.prettyprint .var { color: teal}/*文档声明，属性*/
.prettyprint .pln { color: #48484c}

.prettyprint.linenums{box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0}
.pre-scrollable{max-height:340px;overflow-y:scroll}
ol.linenums{list-style:decimal outside none; margin-left:20px}
ol.linenums li{ line-height:28px; padding-left:10px}
pre ol.linenums{margin:0 0 0 33px}
pre ol.linenums li{padding-left:12px;color:#bbb;line-height:18px;text-shadow:0 1px 0 #fff}

@media (max-width: 767px) {
	pre ol.linenums{ margin-left:0; list-style:none}
	ol.linenums li{ padding-left:0}
	.prettyprint.linenums{box-shadow:inset 0px 0 0 #fbfbfc,inset 0px 0 0 #ececf0}
}

自适应与响应式

1.自适应与响应式有啥区别？

自适应是根据屏幕的宽高来调节元素的宽高和位置，因外面的改变而改变。
响应式是根据不同的宽高来响应不同的排版方式，
bootstrap是响应式鼻祖，通过媒体查询来实现
前端主要就是**排版，调数据;

2.做过响应式页面吗？如果大于1000是黄色，小于1000是红色怎么做？刚好是1000的话你怎么做，怎么设置？

谈谈你对语义化标签的理解？

A. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

B. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

C. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

D. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
nav

可以帮助 UA 迅速获得导航内容，例如读屏器可以省去很多渲染直接跳到导航位置。

aside

可以表示与周围内容关系不太密切的内容 (广告)，通常表现为侧边栏内容 (相关背景内容)、引述内容

header

通常是一组介绍性描述 (搜索框 / logo / …)，网络爬虫知道诸如与之类的部分后可以非常简单的跳过它们，更好的定位网页内容

article

独立的文档、页面、应用、站点，可以单独发布、重用；可以是一篇帖子、一篇文章、一则用户评论、一个可交互的 widget

section

按主题将内容分组，通常会有标题 (heading)
并非「语义化的 div」

你的网站怎么做SEO优化？

1.合理的title、description、keywords

.

网站标题

2.语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

3.非装饰性图片必须加alt

4.向各大搜索引擎登陆入口提交尚未收录站点

常用的行内元素，块级元素，空标签 ？

（1）行内元素有：a b span img input select strong

（2）块级元素有： div ul ol li dl dt dd h1 h2 h4…p

（3）常见的空元素：br,hr,img,nput,link,meta

H5的常用的存储方式有哪些？

html5在引入webStorage之前，主要用cookies.
1.html5的webstorage 分两种：LocalStorage 和SessionStorage，两者的差别主要在生命周期不同。

1.LocalStorage
LocalStorage用于持久化的本地存储，存储资料在客户端（client）的浏览器上，除非主动删除数据，否则数 据是永远不会过期的。LocalStorage使用键值对的方式进行存储，存储的方式只能是字符串。存储内容可以有图片、json、样式、脚本等只要可以序列化为字符串的。
2 . SessionStorage
SessionStorage用于本地存储一个会话中 的数据，这些数据只有在同一个会话中的页面才能访问并且会话结束，例如关闭窗口后，，数据也会随之被销毁。它是一种会话级别的存储。
。通过点击链接（或者用了 window.open）打开的新标签页之间是属于同一个 session 的，
但新开一个标签页总是会初始化一个新的 session，即使网站是一样的，它们也不属于同一个 session。

2.webstorage 与cookie的区别

cookie数据始终在同源的http请求中携带，cookie在浏览器和服务器端来回传递，而localstorage和sessionstorage不会自动把数据传送给服务器端，仅在本地保存。

存储大小限制不同，cookie的存储数据大小要求不能超过4k，每次的http请求都会携带cookie，所以保存的数据需要比较小。sessionstorage和localstorage存储数据大小限制比cookie要大，可以达到5m或者更大，不同浏览器设置可能不同。

数据生命周期有所不同。cookie的生命周期一般在其设置的过期时间之前有效。而sessionstorage仅在关闭窗口前有效，localstorage持久有效，直到手动删除。

作用域不同，sessionstorage不在不同浏览器中共享，即使是同一页面也不支持。而localstorage在所有同源窗口中都是共享的，同样，cookie在所有同源窗口中也是可以共享的。

cookie的数据还有路径的概念，可以通过设置限制cookie只属于某一个路径。

web storage支持事件通知机制，可以将数据更新的通知发送给监听者。

3.离线缓存（application cache）
应用程序缓存器，可对web进行缓存，在没有网络形况下使用，通过创建cache manifest文件,创建应用缓存
4.IndexedDB
索引数据库 (IndexedDB) API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。
indexedDB中没有表的概念，而是objectStore，一个数据库中可以包含多个objectStore，objectStore是一个灵活的数据结构，可以存放多种类型数据。也就是说一个objectStore相当于一张表，里面存储的每条数据和一个键相关联。
5.Web SQL
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

html新特性canvas怎么制作一个名片

css3

1.css3用了哪些新特性?
1.CSS3的选择器
1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
4).nav-stacked>li+li
指的是.nav-stacked下面的li 之后的2345元素样式
2. @Font-face 特性：
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
淘宝网字体使用
@font-face {
font-family: iconfont;
src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}
3. 圆角:
border-radius: 15px;
4.阴影（Shadow）
5.CSS3 的渐变效果
6.Animation动画特效
7.Transition 对象变换时的过渡效果

2.css动画的实现？一个图片打开后不断的旋转？
3.css3动画你有了解？一个元素向左位移100px然后不停旋转？

实现一个三栏布局：

1.float：

置指定的宽高 width:300px, height:100px

.left{
    float: left;
    width: 300px;
    height: 100px;
    background: #631D9F;
}
.right{
    float: right;
    width: 300px;
    height: 100px;
    background: red;
}

现在两侧的样式写好了,那么我们来写中间的样式,

.center{
    margin-left: 300px;
    margin-right: 300px;
    background-color: #4990E2;
}

2.position布局

.left{
    position: absolute;
    left: 0;
    width: 300px;
    background-color: red;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: blue;
}
.right{
    position: absolute;
    right: 0;
    width: 300px;
    background-color: #3A2CAC;
}

3、弹性(flex)布局

首先先写html模版: 这里的html模版和 position使用的html一样,这里就不复制代码了。

flex布局是W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。

当给元素设置display:flex，则该元素就是一个flex容器,其子元素就是容器成员,称之为flex项目,每个项目默认按照从左到右方式排列，所以我们可以很轻松的写出CSS样式:

.main {
    display: flex;
}
.left{
    width: 400px;
    background-color: red;
}
.center{
    background-color: blue;
    word-break: break-word;
}
.right{
    background-color: red;
    width: 400px;
}

网格(gird)布局:

首先先写html模版: 这里的html模版和 position使用的html一样。

网格它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

inline-grid 块级元素变行内

将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。

gird-template-columns、grid-template-rows

gird提供了 gird-template-columns、grid-template-rows属性让我们设置行和列的高、宽

根据属性我们可以写出如下CSS样式:

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
3行3列

grid-row-gap、 grid-column-gap、 grid-gap

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。
grid-gap:  ;
.container {
  grid-gap: 20px 20px;//  grid-gap: 20px;
}

关键字

auto-fill

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

repeat()

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
上面代码表示
repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。 
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-columns: repeat(2, 100px 20px 80px);

fr

如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
（fraction 的缩写，意为"片段"）

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
上面代码表示
平分当前宽度

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
第一列的宽度为150像素，第二列的宽度是第三列的一半。

minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

auto

grid-template-columns: 100px auto 100px;
上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度

布局实例

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
属性对于网页布局非常有用。两栏式布局只需要一行代码。
上面代码将左边栏设为70%，右边栏设为30%。
传统的十二网格布局，写起来也很容易。
grid-template-columns: repeat(12, 1fr);

grid-template-areas

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
上面代码将9个单元格分成a、b、c三个区域。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
如果某些区域不需要利用，则使用"点"（.）表示。

实现一个9宫格:

1.flex:

.flex{
 display: flex;
 flex-wrap: wrap;
}
.flex>li{
 flex-grow: 1; /* 子元素按1/n的比例进行拉伸 */
 background-color: #4d839c;
 text-align: center;
 color: #fff;
 font-size: 50px;
 line-height: 2;
}
.flex>li:nth-of-type(3n){ /* 选择个数是3的倍数的元素 */
 margin-right: 0;
}
.flex>li:nth-of-type(n+7){  /* 选择倒数的三个元素，n可以取0 */
 margin-bottom: 0;
}

2.Flex九宫格

flex-direction:row
flex-wrap:wrap
date-cell:1/4

3.grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

css的position属性:

position其属性有5种 :

   inherit: 继承父元素的position属性值

  static: 默认值，没有定位

  fixed: 生成绝对定位的元素,相对于浏览器窗口进行定位（不管屏幕内容怎么滑动,其位置不会改变）

  relative:生成相对定位,相对于其正常位置进行定位

 absolute:生成绝对定位的元素,相当于static定位以外的第一个父元素进行定位。

实现一个水平垂直居中？有高度没高度的时候怎么实现？

1.垂直居中有哪些方式？自定义高度的话 怎么居中？

bfc

1. 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。

2. 在 BFC 中上下相邻的两个容器的 margin 会重叠，创建新的 BFC 可以避免外边距重叠。

3. 计算 BFC 的高度时，需要计算浮动元素的高度。

4. BFC 区域不会与浮动的容器发生重叠。

5. BFC 是独立的容器，容器内部元素不会影响外部元素。

6. 每个元素的左 margin 值和容器的左 border 相接触。

bfc 第2点
创建新的 BFC 可以避免外边距重叠 在bfc外套个div 设置overflow:hidden;创建bfc环境
bfc 第4点
实现两栏布局（左侧固定 + 右侧自适应布局）
同样利用浮动，左边元素宽度固定 ，设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
.outer {
 height: 100px;
}
.left {
 float: left;
 width: 200px;
 height: 100%;
 background: lightcoral;
}
.right {
 overflow: auto;
 height: 100%;
 background: lightseagreen;
}

除此之外，你还知道哪些 CSS 格式化上下文

网格布局格式化上下文（GFC）
自适应格式化上下文（FFC）
行内格式化上下文（IFC）

请描述px、rpx、em、rem 、vw/vh、百分比的区别？

px 绝对单位，页面按精确像素展示
rpx 相当于把屏幕宽度分为750份，1份就是1rpx
em 相对单位，相对于它的父节点字体进行计算
rem 相对单位，相对根节点html的字体大小来计算
vh 视窗高度，1vh等于视窗高度的1% /vw 视窗宽度，1vw等于视窗宽度的1%
百分比 一般来说就是相对于父元素

/*3.8 效果

Name:			style_animation
Example:		

*/

/* duang 加特效 */
.hui-bounce,.hui-flip,.hui-flash,.hui-shake,.hui-swing,.hui-wobble,.hui-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease}
.hui-fadein,.hui-fadeinT,.hui-fadeinR,.hui-fadeinB,.hui-fadeinL,.hui-bouncein,.hui-bounceinT,.hui-bounceinR,.hui-bounceinB,.hui-bounceinL,.hui-rotatein,.hui-rotateinLT,.hui-rotateinLB,.hui-rotateinRT,.hui-rotateinRB,.hui-flipin,.hui-flipinX,.hui-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards}
.hui-fadeout,.hui-fadeoutT,.hui-fadeoutR,.hui-fadeoutB,.hui-fadeoutL,.hui-bounceout,.hui-bounceoutT,.hui-bounceoutR,.hui-bounceoutB,.hui-bounceoutL,.hui-rotateout,.hui-rotateoutLT,.hui-rotateoutLB,.hui-rotateoutRT,.hui-rotateoutRB,.hui-flipout,.hui-flipoutX,.hui-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards}

/* 淡入 */
.hui-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein}
/* 淡入-从上 */
.hui-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT}
/* 淡入-从右 */
.hui-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR}
/* 淡入-从下 */
.hui-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB}
/* 淡入-从左 */
.hui-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL}
/* 淡出 */
.hui-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout}

/* 淡出-向上 */
.hui-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT}
/* 淡出-向右 */
.hui-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR}
/* 淡出-向下 */
.hui-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB}
/* 淡出-向左 */
.hui-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL}

/* 弹跳 */
.hui-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce}

/* 弹入 */
.hui-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein}
/* 弹入-从上 */
.hui-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT}
/* 弹入-从右 */
.hui-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR}
/* 弹入-从下 */
.hui-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB}
/* 弹入-从左 */
.hui-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL}

/* 弹出 */
.hui-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout}
/* 弹出-向上 */
.hui-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT}
/* 弹出-向右 */
.hui-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR}
/* 弹出-向下 */
.hui-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB}
/* 弹出-向左 */
.hui-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL}

/* 转入 */
.hui-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein}
/* 转入-从左上 */
.hui-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT}
/* 转入-从左下 */
.hui-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB}
/* 转入-从右上 */
.hui-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT}
/* 转入-从右下*/
.hui-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB}

/* 转出 */
.hui-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout}
/* 转出-向左上 */
.hui-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT}
/* 转出-向左下 */
.hui-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB}
/* 转出-向右上 */
.hui-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT}
/* 转出-向右下 */
.hui-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB}

/* 翻转 */
.hui-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip}
/* 翻入-X轴 */
.hui-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX}
/* 翻入-Y轴 */
.hui-flipin,.hui-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY}
/* 翻出-X轴 */
.hui-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX}
/* 翻出-Y轴 */
.hui-flipout,.hui-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY}

/* 闪烁 */
.hui-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash}
/* 震颤 */
.hui-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake}
/* 摇摆 */
.hui-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing}
/* 摇晃 */
.hui-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble}
/* 震铃 */
.hui-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring}
/* define */
/* 淡入 */
@-webkit-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
@-moz-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
@-ms-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
/* 淡入-从上 */
@-webkit-keyframes fadeinT{
    0%{opacity:0;-webkit-transform:translateY(-100px)}
    100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeinT{
    0%{opacity:0;-moz-transform:translateY(-100px)}
    100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeinT{
    0%{opacity:0;-ms-transform:translateY(-100px)}
    100%{opacity:1;-ms-transform:translateY(0)}
}
@keyframes fadeinT{
    0%{opacity:0;transform:translateY(-100px)}
    100%{opacity:1;transform:translateY(0)}
}
/* 淡入-从右 */
@-webkit-keyframes fadeinR{
    0%{opacity:0;-webkit-transform:translateX(100px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinR{
    0%{opacity:0;-moz-transform:translateX(100px)}
    100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinR{
    0%{opacity:0;-ms-transform:translateX(100px)}
    100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinR{
    0%{opacity:0;transform:translateX(100px)}
    100%{opacity:1;transform:translateX(0)}
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB{
    0%{opacity:0;-webkit-transform:translateY(100px)}
    100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeinB{
    0%{opacity:0;-moz-transform:translateY(100px)}
    100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeinB{
    0%{opacity:0;-ms-transform:translateY(100px)}
    100%{opacity:1;-ms-transform:translateY(0)}
}
@keyframes fadeinB{
    0%{opacity:0;transform:translateY(100px)}
    100%{opacity:1;transform:translateY(0)}
}
/* 淡入-从左 */
@-webkit-keyframes fadeinL{
    0%{opacity:0;-webkit-transform:translateX(-100px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinL{
    0%{opacity:0;-moz-transform:translateX(-100px)}
    100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinL{
    0%{opacity:0;-ms-transform:translateX(-100px)}
    100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinL{
    0%{opacity:0;transform:translateX(-100px)}
    100%{opacity:1;transform:translateX(0)}
}
/* 淡出 */
@-webkit-keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
@-moz-keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
@-ms-keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
@keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
/* 淡出-向上 */
@-webkit-keyframes fadeoutT{
    0%{opacity:1;-webkit-transform:translateY(0)}
    100%{opacity:0;-webkit-transform:translateY(-100px)}
}
@-moz-keyframes fadeoutT{
    0%{opacity:1;-moz-transform:translateY(0)}
    100%{opacity:0;-moz-transform:translateY(-100px)}
}
@-ms-keyframes fadeoutT{
    0%{opacity:1;-ms-transform:translateY(0)}
    100%{opacity:0;-ms-transform:translateY(-100px)}
}
@keyframes fadeoutT{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-100px)}
}
/* 淡出-向右 */
@-webkit-keyframes fadeoutR{
    0%{opacity:1;-webkit-transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(100px)}
}
@-moz-keyframes fadeoutR{
    0%{opacity:1;-moz-transform:translateX(0)}
    100%{opacity:0;-moz-transform:translateX(100px)}
}
@-ms-keyframes fadeoutR{
    0%{opacity:1;-ms-transform:translateX(0)}
    100%{opacity:0;-ms-transform:translateX(100px)}
}
@keyframes fadeoutR{
    0%{opacity:1;transform:translateX(0)}
    100%{opacity:0;transform:translateX(100px)}
}
/* 淡出-向下 */
@-webkit-keyframes fadeoutB{
    0%{opacity:1;-webkit-transform:translateY(0)}
    100%{opacity:0;-webkit-transform:translateY(100px)}
}
@-moz-keyframes fadeoutB{
    0%{opacity:1;-moz-transform:translateY(0)}
    100%{opacity:0;-moz-transform:translateY(100px)}
}
@-ms-keyframes fadeoutB{
    0%{opacity:1;-ms-transform:translateY(0)}
    100%{opacity:0;-ms-transform:translateY(100px)}
}
@keyframes fadeoutB{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(100px)}
}
/* 淡出-向左 */
@-webkit-keyframes fadeoutL{
    0%{opacity:1;-webkit-transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(-100px)}
}
@-moz-keyframes fadeoutL{
    0%{opacity:1;-moz-transform:translateX(0)}
    100%{opacity:0;-moz-transform:translateX(-100px)}
}
@-ms-keyframes fadeoutL{
    0%{opacity:1;-ms-transform:translateX(0)}
    100%{opacity:0;-ms-transform:translateX(-100px)}
}
@keyframes fadeoutL{
    0%{opacity:1;transform:translateX(0)}
    100%{opacity:0;transform:translateX(-100px)}
}
/* 弹跳 */
@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
    40%{-webkit-transform:translateY(-30px)}
    60%{-webkit-transform:translateY(-15px)}
}
@-moz-keyframes bounce{
    0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
    40%{-moz-transform:translateY(-30px)}
    60%{-moz-transform:translateY(-15px)}
}
@-ms-keyframes bounce{
    0%,20%,50%,80%,100%{-ms-transform:translateY(0)}
    40%{-ms-transform:translateY(-30px)}
    60%{-ms-transform:translateY(-15px)}
}
@keyframes bounce{
    0%,20%,50%,80%,100%{transform:translateY(0)}
    40%{transform:translateY(-30px)}
    60%{transform:translateY(-15px)}
}
/* 弹入 */
@-webkit-keyframes bouncein{
    0%{opacity:0;-webkit-transform:scale(0.3)}
    50%{opacity:1;-webkit-transform:scale(1.05)}
    70%{-webkit-transform:scale(0.9)}
    100%{-webkit-transform:scale(1)}
}
@-moz-keyframes bouncein{
    0%{opacity:0;-moz-transform:scale(0.3)}
    50%{opacity:1;-moz-transform:scale(1.05)}
    70%{-moz-transform:scale(0.9)}
    100%{-moz-transform:scale(1)}
}
@-ms-keyframes bouncein{
    0%{opacity:0;-ms-transform:scale(0.3)}
    50%{opacity:1;-ms-transform:scale(1.05)}
    70%{-ms-transform:scale(0.9)}
    100%{-ms-transform:scale(1)}
}
@keyframes bouncein{
    0%{opacity:0;transform:scale(0.3)}
    50%{opacity:1;transform:scale(1.05)}
    70%{transform:scale(0.9)}
    100%{transform:scale(1)}
}
/* 弹入-从上 */
@-webkit-keyframes bounceinT{
    0%{opacity:0;-webkit-transform:translateY(-100px)}
    60%{opacity:1;-webkit-transform:translateY(30px)}
    80%{-webkit-transform:translateY(-10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinT{
    0%{opacity:0;-moz-transform:translateY(-100px)}
    60%{opacity:1;-moz-transform:translateY(30px)}
    80%{-moz-transform:translateY(-10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinT{
    0%{opacity:0;-ms-transform:translateY(-100px)}
    60%{opacity:1;-ms-transform:translateY(30px)}
    80%{-ms-transform:translateY(-10px)}
    100%{-ms-transform:translateY(0)}
}
@keyframes bounceinT{
    0%{opacity:0;transform:translateY(-100px)}
    60%{opacity:1;transform:translateY(30px)}
    80%{transform:translateY(-10px)}
    100%{transform:translateY(0)}
}
/* 弹入-从右 */
@-webkit-keyframes bounceinR{
    0%{opacity:0;-webkit-transform:translateX(100px)}
    60%{opacity:1;-webkit-transform:translateX(-30px)}
    80%{-webkit-transform:translateX(10px)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinR{
    0%{opacity:0;-moz-transform:translateX(100px)}
    60%{opacity:1;-moz-transform:translateX(-30px)}
    80%{-moz-transform:translateX(10px)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinR{
    0%{opacity:0;-ms-transform:translateX(100px)}
    60%{opacity:1;-ms-transform:translateX(-30px)}
    80%{-ms-transform:translateX(10px)}
    100%{-ms-transform:translateX(0)}
}
@keyframes bounceinR{
    0%{opacity:0;transform:translateX(100px)}
    60%{opacity:1;transform:translateX(-30px)}
    80%{transform:translateX(10px)}
    100%{transform:translateX(0)}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px)}
    60%{opacity:1;-webkit-transform:translateY(-30px)}
    80%{-webkit-transform:translateY(10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinB{
    0%{opacity:0;-moz-transform:translateY(100px)}
    60%{opacity:1;-moz-transform:translateY(-30px)}
    80%{-moz-transform:translateY(10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinB{
    0%{opacity:0;-ms-transform:translateY(100px)}
    60%{opacity:1;-ms-transform:translateY(-30px)}
    80%{-ms-transform:translateY(10px)}
    100%{-ms-transform:translateY(0)}
}
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px)}
    60%{opacity:1;transform:translateY(-30px)}
    80%{transform:translateY(10px)}
    100%{transform:translateY(0)}
}
/* 弹入-从左 */
@-webkit-keyframes bounceinL{
    0%{opacity:0;-webkit-transform:translateX(-100px)}
    60%{opacity:1;-webkit-transform:translateX(30px)}
    80%{-webkit-transform:translateX(-10px)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinL{
    0%{opacity:0;-moz-transform:translateX(-100px)}
    60%{opacity:1;-moz-transform:translateX(30px)}
    80%{-moz-transform:translateX(-10px)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinL{
    0%{opacity:0;-ms-transform:translateX(-100px)}
    60%{opacity:1;-ms-transform:translateX(30px)}
    80%{-ms-transform:translateX(-10px)}
    100%{-ms-transform:translateX(0)}
}
@keyframes bounceinL{
    0%{opacity:0;transform:translateX(-100px)}
    60%{opacity:1;transform:translateX(30px)}
    80%{transform:translateX(-10px)}
    100%{transform:translateX(0)}
}
/* 弹出 */
@-webkit-keyframes bounceout{
    0%{-webkit-transform:scale(1)}
    25%{-webkit-transform:scale(0.95)}
    50%{opacity:1;-webkit-transform:scale(1.1)}
    100%{opacity:0;-webkit-transform:scale(0.3)}
}
@-moz-keyframes bounceout{
    0%{-moz-transform:scale(1)}
    25%{-moz-transform:scale(0.95)}
    50%{opacity:1;-moz-transform:scale(1.1)}
    100%{opacity:0;-moz-transform:scale(0.3)}
}
@-ms-keyframes bounceout{
    0%{-ms-transform:scale(1)}
    25%{-ms-transform:scale(0.95)}
    50%{opacity:1;-ms-transform:scale(1.1)}
    100%{opacity:0;-ms-transform:scale(0.3)}
}
@keyframes bounceout{
    0%{transform:scale(1)}
    25%{transform:scale(0.95)}
    50%{opacity:1;transform:scale(1.1)}
    100%{opacity:0;transform:scale(0.3)}
}
/* 弹出-向上*/
@-webkit-keyframes bounceoutT{
    0%{-webkit-transform:translateY(0)}
    20%{opacity:1;-webkit-transform:translateY(20px)}
    100%{opacity:0;-webkit-transform:translateY(-100px)}
}
@-moz-keyframes bounceoutT{
    0%{-moz-transform:translateY(0)}
    20%{opacity:1;-moz-transform:translateY(20px)}
    100%{opacity:0;-moz-transform:translateY(-100px)}
}
@-ms-keyframes bounceoutT{
    0%{-ms-transform:translateY(0)}
    20%{opacity:1;-ms-transform:translateY(20px)}
    100%{opacity:0;-ms-transform:translateY(-100px)}
}
@keyframes bounceoutT{
    0%{transform:translateY(0)}
    20%{opacity:1;transform:translateY(20px)}
    100%{opacity:0;transform:translateY(-100px)}
}
/* 弹出-向右*/
@-webkit-keyframes bounceoutR{
    0%{-webkit-transform:translateX(0)}
    20%{opacity:1;-webkit-transform:translateX(-20px)}
    100%{opacity:0;-webkit-transform:translateX(100px)}
}
@-moz-keyframes bounceoutR{
    0%{-moz-transform:translateX(0)}
    20%{opacity:1;-moz-transform:translateX(-20px)}
    100%{opacity:0;-moz-transform:translateX(100px)}
}
@-ms-keyframes bounceoutR{
    0%{-ms-transform:translateX(0)}
    20%{opacity:1;-ms-transform:translateX(-20px)}
    100%{opacity:0;-ms-transform:translateX(100px)}
}
@keyframes bounceoutR{
    0%{transform:translateX(0)}
    20%{opacity:1;transform:translateX(-20px)}
    100%{opacity:0;transform:translateX(100px)}
}
/* 弹出-向下 */
@-webkit-keyframes bounceoutB{
    0%{-webkit-transform:translateY(0)}
    20%{opacity:1;-webkit-transform:translateY(-20px)}
    100%{opacity:0;-webkit-transform:translateY(100px)}
}
@-moz-keyframes bounceoutB{
    0%{-moz-transform:translateY(0)}
    20%{opacity:1;-moz-transform:translateY(-20px)}
    100%{opacity:0;-moz-transform:translateY(100px)}
}
@-ms-keyframes bounceoutB{
    0%{-ms-transform:translateY(0)}
    20%{opacity:1;-ms-transform:translateY(-20px)}
    100%{opacity:0;-ms-transform:translateY(100px)}
}
@keyframes bounceoutB{
    0%{transform:translateY(0)}
    20%{opacity:1;transform:translateY(-20px)}
    100%{opacity:0;transform:translateY(100px)}
}
/* 弹出-向左 */
@-webkit-keyframes bounceoutL{
    0%{-webkit-transform:translateX(0)}
    20%{opacity:1;-webkit-transform:translateX(20px)}
    100%{opacity:0;-webkit-transform:translateX(-100px)}
}
@-moz-keyframes bounceoutL{
    0%{-moz-transform:translateX(0)}
    20%{opacity:1;-moz-transform:translateX(20px)}
    100%{opacity:0;-moz-transform:translateX(-100px)}
}
@-ms-keyframes bounceoutL{
    0%{-ms-transform:translateX(0)}
    20%{opacity:1;-ms-transform:translateX(20px)}
    100%{opacity:0;-ms-transform:translateX(-100px)}
}
@keyframes bounceoutL{
    0%{transform:translateX(0)}
    20%{opacity:1;transform:translateX(20px)}
    100%{opacity:0;transform:translateX(-200px)}
}
/* 转入 */
@-webkit-keyframes rotatein{
    0%{opacity:0;-webkit-transform:rotate(-200deg)}
    100%{opacity:1;-webkit-transform:rotate(0)}
}
@-moz-keyframes rotatein{
    0%{opacity:0;-moz-transform:rotate(-200deg)}
    100%{opacity:1;-moz-transform:rotate(0)}
}
@-ms-keyframes rotatein{
    0%{opacity:0;-ms-transform:rotate(-200deg)}
    100%{opacity:1;-ms-transform:rotate(0)}
}
@keyframes rotatein{
    0%{opacity:0;transform:rotate(-200deg)}
    100%{opacity:1;transform:rotate(0)}
}
/* 转入-从左上 */
@-webkit-keyframes rotateinLT{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinLT{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinLT{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinLT{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/* 转入-从左下 */
@-webkit-keyframes rotateineftB{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateineftB{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateineftB{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateineftB{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/* 转入-从右上 */
@-webkit-keyframes rotateinRT{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinRT{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinRT{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinRT{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
/* 转入-从右下*/
@-webkit-keyframes rotateinRB{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinRB{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinRB{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinRB{
    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
/* 转出 */
@-webkit-keyframes rotateout{
    0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}
}
@-moz-keyframes rotateout{
    0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0}
}
@-ms-keyframes rotateout{
    0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0}
}
@keyframes rotateout{
    0%{transform-origin:center center;transform:rotate(0);opacity:1}
    100%{transform-origin:center center;transform:rotate(200deg);opacity:0}
}
/* 转出-向左上 */
@-webkit-keyframes rotateoutLT{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
}
@-moz-keyframes rotateoutLT{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
}
@-ms-keyframes rotateoutLT{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
}
@keyframes rotateoutLT{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
}
/* 转出-向左下 */
@-webkit-keyframes rotateoutLB{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
}
@-moz-keyframes rotateoutLB{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
}
@-ms-keyframes rotateoutLB{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
}
@keyframes rotateoutLB{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
}
/* 转出-向右上 */
@-webkit-keyframes rotateoutRT{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
}
@-moz-keyframes rotateoutRT{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
}
@-ms-keyframes rotateoutRT{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
}
@keyframes rotateoutRT{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
}
/* 转出-向右下 */
@-webkit-keyframes rotateoutBR{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
}
@-moz-keyframes rotateoutBR{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
}
@-ms-keyframes rotateoutBR{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
}
@keyframes rotateoutBR{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
}
/* 翻转 */
@-webkit-keyframes flip{
    0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}
    40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}
    50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}
    80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in}
    100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}
}
@-moz-keyframes flip{
    0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out}
    40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out}
    50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in}
    80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in}
    100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in}
}
@-ms-keyframes flip{
    0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out}
    40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out}
    50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in}
    80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in}
    100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in}
}
@keyframes flip{
    0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}
    40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}
    50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}
    80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in}
    100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}
}
/* 翻入-X轴 */
@-webkit-keyframes flipinX{
    0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateX(10deg)}
    100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
}
@-moz-keyframes flipinX{
    0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{-moz-transform:perspective(400px) rotateX(-10deg)}
    70%{-moz-transform:perspective(400px) rotateX(10deg)}
    100%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
}
@-ms-keyframes flipinX{
    0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{-ms-transform:perspective(400px) rotateX(-10deg)}
    70%{-ms-transform:perspective(400px) rotateX(10deg)}
    100%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
}
@keyframes flipinX{
    0%{transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{transform:perspective(400px) rotateX(-10deg)}
    70%{transform:perspective(400px) rotateX(10deg)}
    100%{transform:perspective(400px) rotateX(0);opacity:1}
}
/* 翻入-Y轴 */
@-webkit-keyframes flipinY{
    0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateY(10deg)}
    100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
}
@-moz-keyframes flipinY{
    0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-moz-transform:perspective(400px) rotateY(-10deg)}
    70%{-moz-transform:perspective(400px) rotateY(10deg)}
    100%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
}
@-ms-keyframes flipinY{
    0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-ms-transform:perspective(400px) rotateY(-10deg)}
    70%{-ms-transform:perspective(400px) rotateY(10deg)}
    100%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
}
@keyframes flipinY{
    0%{transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{transform:perspective(400px) rotateY(-10deg)}
    70%{transform:perspective(400px) rotateY(10deg)}
    100%{transform:perspective(400px) rotateY(0);opacity:1}
}
/* 翻出-X轴 */
@-webkit-keyframes flipoutX{
    0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
    100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-moz-keyframes flipoutX{
    0%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
    100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-ms-keyframes flipoutX{
    0%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
    100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@keyframes flipoutX{
    0%{transform:perspective(400px) rotateX(0);opacity:1}
    100%{transform:perspective(400px) rotateX(90deg);opacity:0}
}
/* 翻出-Y轴 */
@-webkit-keyframes flipoutY{
    0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
    100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@-moz-keyframes flipoutY{
    0%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
    100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@-ms-keyframes flipoutY{
    0%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
    100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@keyframes flipoutY{
    0%{transform:perspective(400px) rotateY(0);opacity:1}
    100%{transform:perspective(400px) rotateY(90deg);opacity:0}
}
/* 闪烁 */
@-webkit-keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
@-moz-keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
@-ms-keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
@keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
/* 震颤 */
@-webkit-keyframes shake{
    0%,100%{-webkit-transform:translateX(0)}
    10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}
    20%,40%,60%,80%{-webkit-transform:translateX(10px)}
}
@-moz-keyframes shake{
    0%,100%{-moz-transform:translateX(0)}
    10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}
    20%,40%,60%,80%{-moz-transform:translateX(10px)}
}
@-ms-keyframes shake{
    0%,100%{-ms-transform:translateX(0)}
    10%,30%,50%,70%,90%{-ms-transform:translateX(-10px)}
    20%,40%,60%,80%{-ms-transform:translateX(10px)}
}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    10%,30%,50%,70%,90%{transform:translateX(-10px)}
    20%,40%,60%,80%{transform:translateX(10px)}
}
/* 摇摆 */
@-webkit-keyframes swing{
    20%{-webkit-transform:rotate(15deg)}
    40%{-webkit-transform:rotate(-10deg)}
    60%{-webkit-transform:rotate(5deg)}
    80%{-webkit-transform:rotate(-5deg)}
    100%{-webkit-transform:rotate(0)}
}
@-moz-keyframes swing{
    20%{-moz-transform:rotate(15deg)}
    40%{-moz-transform:rotate(-10deg)}
    60%{-moz-transform:rotate(5deg)}
    80%{-moz-transform:rotate(-5deg)}
    100%{-moz-transform:rotate(0)}
}
@-ms-keyframes swing{
    20%{-ms-transform:rotate(15deg)}
    40%{-ms-transform:rotate(-10deg)}
    60%{-ms-transform:rotate(5deg)}
    80%{-ms-transform:rotate(-5deg)}
    100%{-ms-transform:rotate(0)}
}
@keyframes swing{
    20%{transform:rotate(15deg)}
    40%{transform:rotate(-10deg)}
    60%{transform:rotate(5deg)}
    80%{transform:rotate(-5deg)}
    100%{transform:rotate(0)}
}
/* 摇晃 */
@-webkit-keyframes wobble{
    0%{-webkit-transform:translateX(0)}
    15%{-webkit-transform:translateX(-100px) rotate(-5deg)}
    30%{-webkit-transform:translateX(80px) rotate(3deg)}
    45%{-webkit-transform:translateX(-65px) rotate(-3deg)}
    60%{-webkit-transform:translateX(40px) rotate(2deg)}
    75%{-webkit-transform:translateX(-20px) rotate(-1deg)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes wobble{
    0%{-moz-transform:translateX(0)}
    15%{-moz-transform:translateX(-100px) rotate(-5deg)}
    30%{-moz-transform:translateX(80px) rotate(3deg)}
    45%{-moz-transform:translateX(-65px) rotate(-3deg)}
    60%{-moz-transform:translateX(40px) rotate(2deg)}
    75%{-moz-transform:translateX(-20px) rotate(-1deg)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes wobble{
    0%{-ms-transform:translateX(0)}
    15%{-ms-transform:translateX(-100px) rotate(-5deg)}
    30%{-ms-transform:translateX(80px) rotate(3deg)}
    45%{-ms-transform:translateX(-65px) rotate(-3deg)}
    60%{-ms-transform:translateX(40px) rotate(2deg)}
    75%{-ms-transform:translateX(-20px) rotate(-1deg)}
    100%{-ms-transform:translateX(0)}
}
@keyframes wobble{
    0%{transform:translateX(0)}
    15%{transform:translateX(-100px) rotate(-5deg)}
    30%{transform:translateX(80px) rotate(3deg)}
    45%{transform:translateX(-65px) rotate(-3deg)}
    60%{transform:translateX(40px) rotate(2deg)}
    75%{transform:translateX(-20px) rotate(-1deg)}
    100%{transform:translateX(0)}
}
/* 震铃 */
@-webkit-keyframes ring{
    0%{-webkit-transform:scale(1)}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
    100%{-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes ring{
    0%{-moz-transform:scale(1)}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
    100%{-moz-transform:scale(1) rotate(0)}
}
@-ms-keyframes ring{
    0%{-ms-transform:scale(1)}
    10%,20%{-ms-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg)}
    100%{-ms-transform:scale(1) rotate(0)}
}
@keyframes ring{
    0%{transform:scale(1)}
    10%,20%{transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
    100%{transform:scale(1) rotate(0)}
}

包含 abc

[class*=“abc”]{color: blue}

类名 等于 abc
[class~=“abc”]{color: red}