……
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安全色
写在一行内,属性之间、属性名和值之间以及属性与“{}”之间应减少空格,去掉最后一个“;”,例如:.class{width:200px;height:100px}
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:;
IE6/7
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 控制组
----------------------------------**
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: 重定义浏览器默认样式
*/
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}
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}
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}
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}
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}
Name: style_text-overflow
Example: class="text-overflow"
*/
.text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-two-overflow{ overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
Name: style_line
Example: class="line"
*/
.line{font-size:0; line-height:0; border-top: solid 1px #eee; float: none}
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}
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}
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}
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)}
Name: style_pipe
Example: |
*/
.pipe{margin:0 5px;color:#CCC;font-size:10px!important}
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}
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}
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}
Example: class="text-muted|text-primary|text-warning|text-error|text-danger|text-success|text-info"
Explain: 柔和|重要|警告|错误|危险|成功|信息
*/
Example: UI
Explain:
*/
abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}
abbr.initialism{font-size:90%;text-transform:uppercase}
Example: 北京市海淀区上地……
Explain:
*/
address{display:block;margin-bottom:20px;font-style:normal;line-height:20px}
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"}
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}
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)}
}
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}
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}
Name: style_display
Example:
.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}
.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个 左右长度固定,中间自适应
.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;
}
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}
}
自适应是根据屏幕的宽高来调节元素的宽高和位置,因外面的改变而改变。
响应式是根据不同的宽高来响应不同的排版方式,
bootstrap是响应式鼻祖,通过媒体查询来实现
前端主要就是**排版,调数据;
A. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
B. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
C. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
D. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
nav
可以帮助 UA 迅速获得导航内容,例如读屏器可以省去很多渲染直接跳到导航位置。
可以表示与周围内容关系不太密切的内容 (广告),通常表现为侧边栏内容 (相关背景内容)、引述内容
通常是一组介绍性描述 (搜索框 / logo / …),网络爬虫知道诸如与之类的部分后可以非常简单的跳过它们,更好的定位网页内容
独立的文档、页面、应用、站点,可以单独发布、重用;可以是一篇帖子、一篇文章、一则用户评论、一个可交互的 widget
按主题将内容分组,通常会有标题 (heading)
并非「语义化的 div」
.
(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
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怎么制作一个名片
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然后不停旋转?
置指定的宽高 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;
}
.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;
}
首先先写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;
}
首先先写html模版: 这里的html模版和 position使用的html一样。
网格它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。
将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器,所有容器直接子结点自动成为网格项目。
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属性设置列与列的间隔(列间距)。
.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;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
上面代码表示每列宽度100px,然后自动填充,直到容器不能放置更多的列。
.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);
如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。
(fraction 的缩写,意为"片段")
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
上面代码表示
平分当前宽度
.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}
第一列的宽度为150像素,第二列的宽度是第三列的一半。
minmax()函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
minmax(100px, 1fr)表示列宽不小于100px,不大于1fr。
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: 'a a a'
'b b b'
'c c c';
上面代码将9个单元格分成a、b、c三个区域。
grid-template-areas: 'a . c'
'd . f'
'g . i';
如果某些区域不需要利用,则使用"点"(.)表示。
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%);
}
position其属性有5种 :
inherit: 继承父元素的position属性值
static: 默认值,没有定位
fixed: 生成绝对定位的元素,相对于浏览器窗口进行定位(不管屏幕内容怎么滑动,其位置不会改变)
relative:生成相对定位,相对于其正常位置进行定位
absolute:生成绝对定位的元素,相当于static定位以外的第一个父元素进行定位。
1.垂直居中有哪些方式?自定义高度的话 怎么居中?
块级元素会在垂直方向一个接一个的排列,和文档流的排列方式一致。
在 BFC 中上下相邻的两个容器的 margin 会重叠,创建新的 BFC 可以避免外边距重叠。
计算 BFC 的高度时,需要计算浮动元素的高度。
BFC 区域不会与浮动的容器发生重叠。
BFC 是独立的容器,容器内部元素不会影响外部元素。
每个元素的左 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;
}
网格布局格式化上下文(GFC)
自适应格式化上下文(FFC)
行内格式化上下文(IFC)
px 绝对单位,页面按精确像素展示
rpx 相当于把屏幕宽度分为750份,1份就是1rpx
em 相对单位,相对于它的父节点字体进行计算
rem 相对单位,相对根节点html的字体大小来计算
vh 视窗高度,1vh等于视窗高度的1% /vw 视窗宽度,1vw等于视窗宽度的1%
百分比 一般来说就是相对于父元素
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}