2015年---移动端webapp知识总结
没想到这样又过了5个月了,近期辞职了，所以我有时间来做总结.
这段时间里我学习了很多东西，而且都是我们移动端webapp的同学值得去学习的。
我先告诉大家我这次写的总结，有以下内容:
1.body的背景图，img图片自适应,切图小技巧.
2.字体rem自适应问题.
3.@media的断点分析.
4.页面布局:盒子模型.
5.CSS3选择器和H5新标签的使用.
6.表单常用的正则验证.
7.CSS3的变形,渐变,动画.
以下是去取原生样式的方法.
8.单选多选去掉原生方法.
9.select下拉框改变右边下拉按钮去掉原生方法.
10.文件上传,改变原生方法.
11.input框在手机里点击后,被输入法挡住的解决方法.
一,body的背景图,img图片自适应,切图小技巧.
1,body的背景图：人往往会越学越多，越学越忘记之前的东西基础知识.
近期,我们公司的页面设计做的背景图,经常出问题,往往是底部留白,不能把整个浏览器页面铺满,原因主要是忘记在html,body{height:100%}.
body{background:url('../img/back.jpg') no-repeat;background-size:100% 100%;}
如果底部出现留白,不能占满屏幕时的解决方法:添加 html,body{height:100%}
2,img图片自适应:
图标要设置宽度和高度的话，单位记得是rem.
图片宽度:max-width:100%;,也要给高度.
<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x，mm-width-512px.jpg 3x">
或者:
<img class="image" src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w" sizes="(max-width:360px) 340px, 128px">
/*视区宽度不大于360像素时候，图片实际尺寸340像素*/
如果是用背景图的方法就这样:
/* retina image */
@media only screen {
img{ background-image:url(images/w-day@480.png);}
}
@media only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min--moz-device-pixel-ratio:2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (min-device-pixel-ratio:2), only screen and (min-resolute:300dpi), only screen and (min-resolute:2dppx) {
img{ background-image: url(images/w-day@720.png);}
}
最后可以参考下:
http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
3,切图小技巧:平常我们切图做页面的时候,会遇到一些页面需要切一个居中的图片.
对于这样居中的图片，我们该怎么解决呢？
我们可以直接把该图片的2边空白一起给切掉，
这样的好处就是:1,我们不需要计算2边居中的距离;2,图片可以不失真(这点几乎除了设计师能看出来);
二.字体rem自适应问题：
在手机端的字体大家都应该知道是以62.5%来设置html文字大小的,具体怎么计算怎么回事这个百度吧.
然而,在这里我觉得设计师是需要跟前端开发者来做一个文字大小的规范,比如说在320px屏幕大小,360px,420px等等大小不同屏幕上所要看到的文字大小会是多少？
下面是我所做的总结:(以2px来进行递增,具体请以你们与设计师沟通后来进行设置)
/*1rem=10px,同时,浏览器最低的字体大小是12px*/
/*字体自适应*/
/*比如说你在320px分辨率时,设置字体大小为1.2rem时,现在在不同宽度都可以看上去一样大小实现自适应.*/
/*设计师是以iphone6为设计标准时,16px=100%,每个断点以2px递增页面最小的字体大小(6.25%=1px)*/
h1{font-size:2.8rem;}
h2{font-size:2.6rem;}
h3{font-size:2.2rem;}
@media only screen and (min-width:360px) and (max-width:374px){
/*三星大屏幕机最低宽度:note2-note3,S2-S4:14px*/
html{font-size:87.5% !important;}
}
@media only screen and (min-width:375px) and (max-width:430px) {
/*Iphone6,Iphone6plus最低宽度:16px*/
html{font-size:100% !important;}
}
/*手机横屏:最低宽度480px:18px*/
@media only screen and (min-width:480px) and (max-width:740px)and (orientation:landscape){
html{font-size:112.5% !important;}
}
/*平板电脑:最低宽度768px:20px*/
@media only screen and (min-width:768px) {
html{font-size:125% !important;}
}
复制下面的来看看效果吧！
<ul>
<li>
<span>文字大小Rem这里可以看到文字在不同屏幕显示不同的大小.</span>
</li>
<li>
<h1>Hello World!</h1>
</li>
<li>
<h2>Hello World!</h2>
</li>
<li>
<h3>Hello World!</h3>
</li>
<li>
<span style="font-size:1.2rem">Hello World!</span>
</li>
</ul>
三,@media的断点分析:
only关键字:only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对 那些不支持Media Query但却支持Media Type设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持 Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
min-width:最小宽度为多少时执行该样式;max-width:最大宽度为多少时执行该样式.
有宽度,那么高度呢？我经常做页面往往忘记的就是高度,因为我不知道怎么入手,但经常日常的工作和与同行沟通我发现可以通过定义高度来解决480px以下的手机页面问题.
min-height:最小高度为多少时执行该样式;max-height:最大高度为多少时执行该样式.
以下是分享的总结:
/* 手机断点 */
/*min-device-width或max-device-width指的是设备整个渲染区宽度(设备的实际最大或最小宽度),
用了它可能在某些安卓机无法调用到下面的样式,因为某部分安卓机的屏幕大小不一致.*/
/*iphone4等屏幕高度480px的解决方案*/
@media only screen and (max-device-height:480px) { }
/*iphone5以上的屏幕高度解决方案*/
@media only screen and (min-device-height:481px) { } @media only screen and (min-width:360px) and (max-width:374px){
/*三星大屏幕机最低宽度:Note2-Note3,S2-S4*/ }
@media only screen and (min-width:375px) and (max-width:430px) {
/*Iphone6 plus,红米等大屏幕手机*/ } /*手机横屏:orientation:landscape*/
@media only screen and (min-width:480px) and (max-width:569px) and (orientation:landscape) {
/*小米1,1s,iphone4,4s,5,5s等屏幕横屏宽度断点*/
}
@media only screen and (min-width:570px) and (max-width:640px) and (orientation:landscape){
/*三星,红米等手机屏幕横屏宽度断点*/
}
@media only screen and (min-width:641px) and (max-width:667px) and (orientation:landscape) {
/*Iphone6横屏宽度断点*/
}
@media only screen and (min-width:736px) and (max-width:767px) and (orientation:landscape){
/*Iphone6 plus横屏宽度断点*/
} @media all and (orientation:landscape) {
/*这里是指所有屏幕横屏时*/
} /*平板和电脑:最低宽度768px*/
@media only screen and (min-width:768px) and (max-width: 959px) { }
@media only screen and (min-width:960px) and (max-width:1024px) { }
@media only screen and (min-width:1025px)and (max-width:1536px) { }
四,页面布局:盒子模型
今天就以不规则布局来学习，之前做这个我花了很多时间还没达到很完美的效果！
这次用这个来box-sizing:border-box布局，发现效果还差一点点，所以多多指教了！
我来讲解下我css框架是如何使用来布局页面的(这个css框架我只是改了下类名而已,它是一个网上公开的框架,刚好是最轻量的).
首先,wrapper是我通过学习bootstrap框架提取出来的,因为一般情况下,你的页面如果有底部栏时，你有可能不能滑动而且还会被底部栏挡住.
只需要在wrapper加个padding-bottom就可以了,有底部栏就至少加个50px吧.
然后,wrap和grid你也看到我是一起写的，他们的也一起使用的.
这里涉及到关于浮动的问题,在移动端最好是少用浮动和绝对定位.
只要你页面布局时,加上grid这个class类就可以帮你清除浮动了。
另外,里面我也写了box这个类名，定义简单的是box-sizing:border-box,因为这样方便以后布局.(好像有点罗嗦)
同时,这里是可以使用栅格布局的.很灵活,因为百分比类名是你自己定义的.
如:
.w30p{width:30%}
<div class="wrap grid">
<p class="w30p wrap"></p>
</div>
HTML页面:
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" name="no-store" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta name="renderer" content="webkit">
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="css/template.css" />
<style>
.bg1{background:#00CC66;}
.bg2{background:#AAAAAA;}
.bg3{background:#EEEEEE;}
.bg4{background:#000000;}
.bg5{background:#505050;}
.bg6{background:#CCCCCC;}
.h100{height:100px;}
.h145{height:145px;}
aside{width:30%;float: left;}
.con{width:70%;float: left;}
.w48p{width:48%;}
.mr4p{margin-right:4%;}
.mr2p{margin-right:2%;}
.mb10{margin-bottom:10px;}
.ptb10{padding:10px 0;}
li{display: inline-block;}
.w28p{width:28%;}
.w68p{width:68%;}
.w15p{width:15%;}
.w53p{width:53%;}
.w30p{width:30%;}
.h210{height:210px;} </style>
</head> <body>
<section class="wrap grid p5">
<aside class="box p5">
<div class="box h145 bg1 mb10"></div>
<div class="box h145 bg2"></div>
</aside>
<section class="box con p5">
<div class="box h100 bg3"></div>
<div class="box h100 ptb10">
<div class="box bg4 w48p fl mr4p"></div>
<div class="box bg5 w48p fl"></div>
</div>
<div class="wrap grid box h100 bg6"></div>
</section>
</section> <section class="wrap grid p5">
<ul class="box h100 m5">
<li class="w30p h100 bg4 fl mr2p"></li>
<li class="w68p h100 bg5 fl"></li>
</ul>
<ol class="box h100 m5">
<li class="w53p h100 bg2 fl mr2p"></li>
<li class="w28p h100 bg3 fl mr2p"></li>
<li class="w15p h100 bg1 fl"></li>
</ol>
<section class="box m5">
<div class="w30p h210 bg1 fl mr2p"></div>
<div class="w68p h100 w100p fl">
<ul class="box h100 mb10">
<li class="w28p h100 bg3 mr4p fl"></li>
<li class="w68p h100 bg6 fl"></li>
</ul>
<ul class="box h100">
<li class="w68p h100 bg2 mr4p fl"></li>
<li class="w28p h100 bg5 fl"></li>
</ul>
</div>
</section>
</section> </body> </html>
以下是我总结得到的css样式,大家可以参考:(这里我会不定期更新,里面都写上了去掉原生的样式,其他要你自己写了)
@charset "utf-8";*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;outline:;-webkit-tap-highlight-color:transparent}a:focus,select:focus{-webkit-tap-highlight-color:transparent,-webkit-user-modify:read-write-plaintext-only}a,body,img{-webkit-touch-callout:none}body,html{height:100%}html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{-webkit-user-select:none;-webkit-overflow-scrolling:touch}article,aside,audio,blockquote,body,button,canvas,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,li,nav,ol,p,progress,section,td,textarea,th,ul,video{margin:;padding:;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline}button,select{text-transform:none}h1,h2,h3{font-weight:}strong{font-weight:}a:focus{outline:thin dotted}a:focus{-webkit-user-modify:read-write-plaintext-only}a,a:active,a:hover{text-decoration:none}a{outline:;background:0 0}fieldset,img{border:}img,video{max-width:100%}em,i{font-style:normal}table{border-collapse:collapse;border-spacing:}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:}del{text-decoration:line-through}hr{height:;-webkit-box-sizing:content-box;box-sizing:content-box}ol,ul{list-style:none}.hide{display:none}.block,.show{display:block}.fl,.fr{display:inline}.fl{float:left}.fr{float:right}.tac{text-align:center}.tal,caption,th{text-align:left}.tar{text-align:right}.inline{display:inline-block}.vab{vertical-align:bottom}.vas{vertical-align:sub}.vam{vertical-align:middle}.vat{vertical-align:top}.grid,.grid:after,.grid:before,.wrap,.wrap:after,.wrap:before{-webkit-box-sizing:border-box;box-sizing:border-box}.grid:after,.grid:before{display:table;content:"";line-height:}.grid:after{clear:both}.grid{margin:;padding:;list-style-type:none}.grid>.grid{float:left;clear:none;margin:0!important}
sub,sup{font-size:75%;line-height:;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
svg:not(:root){overflow:hidden}
a{text-decoration:none;color:#000}
a:active{color:#000}
ul li{display:block}
ol li{display:inline-block}
input[type="button"],
input[type="reset"],
input[type="submit"],
a:focus,a:active,a:hover,
input:focus,
textarea:focus{outline:none}
textarea{overflow:auto;vertical-align:top}
a:active,a:focus,a:hover,
input:focus,input[type=button],input[type=reset],input[type=submit],textarea:focus{outline:none}
input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input,input[type=checkbox],input[type=radio]{margin:;padding:;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline}
input[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
input:focus,textarea:focus{-webkit-tap-highlight-color:transparent,-webkit-user-modify:read-write-plaintext-only}
input::-ms-clear{display:none}
textarea{resize:none}
textarea{overflow:auto;vertical-align:top}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=color],input[type=search],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],input[type=checkbox],input[type=radio],select,textarea{-webkit-user-select:text;-webkit-appearance:none}
/*ios上使用transform的时候的闪屏问题可以尝试使用*/
.iosTransform{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden}
input::-webkit-input-speech-button{display:none}/*Andriod 上去掉语音输入按钮*/
/*针对number做的去取原生*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:}
/*input和textarea的placeholder字体颜色和大小的设置,还有点击焦点时的样式*/
input::-webkit-input-placeholder{color:#FFA500}
textarea::-webkit-input-placeholder{color:#FFA500}
input:focus,textarea:focus{border:1px solid #f60}
/*1rem=10px*/
/*字体自适应*/
/*比如说你在320px分辨率时,设置字体大小为1.2rem时,现在在不同宽度都可以看上去一样大小实现自适应.*/
/*设计师是以iphone5为设计标准时,16px=100%,每个断点以1.2px递增页面最小的字体大小(6.25%=1px)*/
body{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;background:#1a2448;color:#000}
/*字体自适应:以1.2rem为最小字体大小*/
h1{font-size:2.125rem}
h2{font-size:1.875rem}
h3{font-size:1.75rem}
h4{font-size:1.625rem}
h5{font-size:1.5rem}
h6{font-size:1.375rem}
article,button,input,p,select,span,textarea,h1,h2,h3,h4,h5,h6{line-height:20px}
/*分情况来做,不是所有页面都需要字体随着屏幕大小改变而改变的.*/
/*三星大屏幕机最低宽度:note2-note3,S2-S4*/
@media only screen and (min-width:360px) and (max-width:384px){
html{font-size:64% !important}
}
/*Iphone6,Iphone6plus*/
@media only screen and (min-width:385px) and (max-width:435px) {
html{font-size:80% !important}
article,button,input,p,select,span,textarea,h1,h2,h3,h4,h5,h6{line-height:22px}
}
/*部分机型存在type为search的input，自带close按钮样式修改方法*/
#search::-webkit-search-cancel-button{display:none}
#fixed{position:fixed;width:100%;left:;top:;z-index:;height:80px;transform:translateZ(0);-webkit-transform:translateZ(0)}/*bug修复*/
/*单行文本控制换行*/
.outL{white-space:normal;word-break:break-all;width:100px}
/*单行文本控制溢出(显示....):注意设置宽度*/
.outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:50%}
/*多行文本溢出显示省略号(...)的方法------webkit-line-clamp:2;这里的数字代表多少行*/
.ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:;-webkit-box-orient:vertical}
/*容器*/
.wrapper{position:absolute;top:;right:;bottom:;left:;padding-bottom:60px;overflow:auto;-webkit-overflow-scrolling:touch}
/*头尾*/
.header,.footer{position:fixed;right:;left:;z-index:}
.header{top:;height:44px}
.footer{bottom:}
/*宽度*/
.wrap{float:left;width:100%}
.w100p{width:100%}
.w20p{width:20%}
/*边距*/
.m5{margin:5px}
.p5{padding:5px}
.flex{display:-webkit-flex;display:flex;display:-webkit-box;-webkit-flex:;flex:;-webkit-box-flex:}
/*垂直方向*/
.col{display:-webkit-box;display:flex;display:-webkit-flex;height:100%;-webkit-box-orient:vertical;flex-direction:column}
/*水平方向*/
.row{display:-webkit-flex;display:flex;display:-webkit-box;margin:auto;width:100%;height:auto;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;-webkit-box-orient:horizontal;-webkit-box-lines:multiple}
.flex1{-webkit-box-flex:;-webkit-flex:;flex:}
.flex2{-webkit-box-flex:;-webkit-flex:;flex:}
.flex3{-webkit-box-flex:;-webkit-flex:;flex:}
.box{height:100%;text-align:center}
/*如果遇上input无法输入内容时,可能是因为下面的原因:*/
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=color],input[type=search],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],input[type=checkbox],input[type=radio],select,textarea{-webkit-user-select:text;-webkit-appearance:none}
下面这个是用flex来写的不规则布局:
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta name="renderer" content="webkit">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="css/template.css" />
<style>
.bg1{background:#00CC66;}
.bg2{background:#AAAAAA;}
.bg3{background:#FE6C9C;}
.bg4{background:#000000;}
.bg5{background:#505050;}
.bg6{background:#CCCCCC;}
.h80{height:80px;}
.h100{height:100px;}
.h145{height:145px;} .mr4p{margin-right:4%;}
.mr2p{margin-right:2%;}
.mb10{margin-bottom:10px;}
.ptb10{padding:10px 0;}
li{display:inline-block;}
.mr1p{margin-right:1%;}
.h210{height:210px}
.flex4{-webkit-box-flex:4;-webkit-flex:4;flex:4}
.flex6{-webkit-box-flex:6;-webkit-flex:6;flex:6}
</style>
</head> <body> <section class="flex p5">
<ul class="col p5 flex4">
<li class="bg1 h145" style="margin-bottom:10px;">1</li>
<li class="bg6 h145">2</li>
</ul>
<ul class="col flex6 p5">
<li class="bg5 h100">1</li>
<ul class="row h100" style="padding:5% 0;">
<li class="flex bg3 p5" style="margin-right:3%;">3</li>
<li class="flex bg4 p5">4</li>
</ul>
<li class="h100 bg2">5</li>
</ul>
</section> <section class="flex p5">
<ul class="col p5 flex4">
<li class="bg1 h145" style="margin-bottom:10px;">1</li>
<li class="bg6 h145">2</li>
</ul>
<div class="col flex6 p5">
<div class="bg5 h100">1</div>
<aside style="padding:10px 0;">
<div class="row">
<div class="flex2 h80 bg3 p5 mr2p">3</div>
<div class="flex6 h80 bg6 p5">4</div>
</div>
</aside>
<li class="h100 bg2">5</li>
</div>
</section> <section class="flex p5">
<section class="col p5 w100p">
<div class="row" style="margin-bottom:1%;">
<div class="flex1 h100 bg1 mr1p">1</div>
<div class="flex3 h100 bg2">2</div>
</div>
<div class="row">
<div class="flex3 h100 bg6 mr1p">3</div>
<div class="flex2 h100 bg5 mr1p">4</div>
<div class="flex1 h100 bg3">5</div>
</div>
</section>
</section> <section class="flex p5">
<section class="row p5 w100p">
<div class="flex1 h210 bg2 mr2p">1</div>
<div class="flex3 h210">
<div class="row">
<div class="flex1 h100 bg3 mr2p">2</div>
<div class="flex3 h100 bg2">3</div>
</div>
<div class="row"style="margin-top:5%;">
<div class="flex3 h100 bg5 mr2p">4</div>
<div class="flex1 h100 bg6">5</div>
</div>
</div>
</section>
</section>
</body> </html>
五,CSS3选择器和H5新标签的使用：
伪类选择器,我以前是一直没用过的,但发现有时候用了你会有新收获的样子.
同时,我也通过W3C来新增了些该添加的新标签.这样方便以后使用.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" name="no-store" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta name="renderer" content="webkit">
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="css/template.css" />
<title>选择器和H5新标签</title>
<style>
body{color:#000000;}
article>h1{background:#239528;}/*h1是article的子元素*/
.title+p{background:#239528;}/*兄弟选择器*/
.title1 li:first-child{background:#239528;}/*第一个li元素*/
p:nth-of-type(2){color:#0066cc;}/*2是指父元素的第二个选择器*/
fieldset:nth-child(odd){background:#239528;}
fieldset:nth-child(even){color:#0066cc;}
ul li:last-child{background:#0066CC;color:#239528;}/*最后一个li元素*/
</style>
</head> <body> <address>
Written by <a href="#">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
<blockquote>
<p class="title">This is a long quotation. This is a long quotationuotatiouotatio.</p>
<p>This is a long quotation.</p>
<p>This is a long quotation. This is a long quotation.</p>
</blockquote> <figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<ul class="title1">
<li>黄浦江</li>
<li>黄浦江黄浦江</li>
<li>黄浦江黄浦江黄浦江</li>
</ul>
</figure> <form>
<fieldset>
身高：
<input type="text" />
</fieldset>
<fieldset>
体重：
<input type="text" />
</fieldset>
<fieldset>
姓名：
<input type="text" />
</fieldset>
<fieldset>
住址：
<input type="text" />
</fieldset>
</form>
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details> </body> </html>
六,表单常用的正则验证:
在HTML5中添加了几个值得关注的关键词:pattern通过它来写正则表达式;required通过它来提醒用户还有什么没填写好！
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--开发后删除-->
<meta http-equiv="Pragma" name="no-store" />
<!--必须联网才可以访问-->
<meta http-equiv="Cache-Control" name="no-store" />
<!--浏览器缓存-->
<meta http-equiv="window-target" content="_top" />
<!--防止别人在框架里调用自己的页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--忽略页面中的数字识别为电话，忽略email识别,去除Android平台中对邮箱地址的识别-->
<meta content="telephone=no" name="format-detection" />
<!--启用360浏览器的极速模式(webkit)-->
<meta name="renderer" content="webkit">
<!--UC强制竖屏-->
<meta name="screen-orientation" content="portrait">
<!--QQ强制竖屏-->
<meta name="x5-orientation" content="portrait">
<!--windows phone 点击无高光-->
<meta name="msapplication-tap-highlight" content="no">
</head> <body>
<form method="post">
<fieldset>
<input type="text" placeholder="你的中文名" pattern="[\u4e00-\u9fa5]" required/>
</fieldset>
<fieldset>
<input type="text" placeholder="用户名" name="usename" pattern="^[0-9a-zA-Z]{4,16}$" autocomplete="on" required/>
</fieldset>
<fieldset>
<input type="password" id="input1" placeholder="密码" pattern="^[a-zA-Z][0-9a-zA-Z_]{5,15}$" required/>
</fieldset>
<fieldset>
<input type="password" id="input2" placeholder="密码" pattern="^[a-zA-Z][0-9a-zA-Z_]{5,15}$" required/>
</fieldset>
<fieldset>
<input type="email" placeholder="邮箱" pattern="[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?" autocomplete="on" required/>
</fieldset>
<fieldset>
<input type="url" placeholder="http://www.baidu.com" pattern="[a-zA-z]+://[^\s]*" required/>
</fieldset>
<fieldset>
<input type="text" placeholder="QQ" pattern="[1-9][0-9]{4,}" autocomplete="on" required/>
</fieldset>
<fieldset>
<input type="date" placeholder="年-月-日" pattern="([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))" required/>
</fieldset>
<fieldset>
<input type="text" placeholder="手机号" maxlength="11" pattern="/^((\(\d{3}\))|(\d{3}\-))?13\d{9}|15\d{9}$/" required/>
</fieldset>
<fieldset>
<input type="text" placeholder="身份证" maxlength="18" pattern="^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$" required/>
</fieldset> <input type="submit" value="提交" onclick="check()" />
</form>
<script>
function check() {
with(document.all) {
if (input1.value != input2.value) {
alert("false")
input1.value = "";
input2.value = "";
} else document.forms[0].submit();
}
}
</script>
</body> </html>
七,CSS3的渐变,动画:
渐变:这个学习起来不难，但就是要记住方向.
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" name="no-store" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta name="renderer" content="webkit">
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="css/template.css" />
<style>
div{
width:100%;
height:100px;
}
/*从orange向green渐变*/
/*从左向右渐变*/
.linear1{
background-image: linear-gradient(360deg,orange,green);background-image:-webkit-linear-gradient(360deg,orange,green);}
.linear8{background-image: linear-gradient(0deg,orange,green);background-image:-webkit-linear-gradient(0deg,orange,green);}
/*效果是从顶部向底部渐变*/
.linear2{background-image: linear-gradient(to bottom,orange,green);background-image:-webkit-linear-gradient(to bottom,orange,green);}
.linear6{background-image: linear-gradient(270deg,orange,green);background-image:-webkit-linear-gradient(270deg,orange,green);}
/*从右边向左边渐变*/
.linear3{background-image: linear-gradient(180deg,orange,green);background-image:-webkit-linear-gradient(180deg,orange,green);}
.linear4{background-image: linear-gradient(-180deg,orange,green);background-image:-webkit-linear-gradient(-180deg,orange,green);}
/*效果是从底部向顶部渐变*/
.linear5{background-image: linear-gradient(90deg,orange,green);background-image:-webkit-linear-gradient(90deg,orange,green);}
.linear7{background-image: linear-gradient(-270deg,orange,green);background-image:-webkit-linear-gradient(-270deg,orange,green);}
.linear9{background-image:linear-gradient(to top,orange,green);background-image:-webkit-linear-gradient(to top,orange,green);}
/*从右下角向左上角线性渐变*/
.linear10{background-image: linear-gradient(to top left,#00cc66,#505050);background-image:-webkit-linear-gradient(to top left,#00cc66,#505050);}
/*从左下角向右上角线性渐变*/
.linear11{background-image: linear-gradient(to top right,#00cc66,#505050);background-image:-webkit-linear-gradient(to top right,#00cc66,#505050);}
/*从右上角向左下角线性渐变*/
.linear12{background-image:linear-gradient(to bottom left,#00cc66,#505050);background-image:-webkit-linear-gradient(to bottom left,#00cc66,#505050);}
/*从左上角向右下角线性渐变*/
.linear13{background-image: linear-gradient(to bottom right,#00cc66,#505050);background-image:-webkit-linear-gradient(to bottom right,#00cc66,#505050);}
/*从右向左线性渐变*/
.linear14{background-image: linear-gradient(to left,#505050,green,#00cc66,orange);background-image:-webkit-linear-gradient(to left,#505050,green,#00cc66,orange);}
/*径向渐变*/
/*1,渐变往中心方向聚焦--center*/
.linear15{
background-image:radial-gradient(circle at center,#505050,#00cc66);
background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);
}
/*2,渐变往顶部方向聚焦--top*/
/*3,渐变往右边方向聚焦--right*/
/*4,渐变往底部方向聚焦--bottom*/
/*5,渐变往左边方向聚焦--left*/
/*6,渐变往左上角方向聚焦--top left*/
/*7,渐变往右上角方向聚焦--top right*/
/*8,渐变往右下角方向聚焦--bottom right*/
/*9,渐变往左下角方向聚焦--bottom left*/
/*circle是圆形,ellipse是椭圆形*/
/*圆形渐变*/
.linear16{
background-image:radial-gradient(20px circle at center,#505050,#00cc66);
background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);
}
/*椭圆渐变*/
.linear17{
background-image:radial-gradient(2em 4em ellipse at center,#505050,#00cc66);
background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);
}
/*可以自定义圆形的方向*/
.linear18{
background-image:radial-gradient(2em circle at top,#505050,#00cc66);
background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);
}
/*可以多色渐变*/
.linear19{
background:radial-gradient(red 20%,green 50%,blue 80%);
background:-webkit-radial-gradient(red 20%,green 50%,blue 80%);
}
</style>
</head> <body>
<section>
<!--从左向右渐变-->
<div class="linear1"></div>
<div class="linear8"></div>
<!--从顶部向底部渐变-->
<div class="linear2"></div>
<div class="linear6"></div>
<!--从右边向左边渐变-->
<div class="linear3"></div>
<div class="linear4"></div>
<!--从底部向顶部渐变-->
<div class="linear5"></div>
<div class="linear7"></div>
<div class="linear9"></div>
<!--从右下角向左上角线性渐变-->
<div class="linear10"></div>
<!--从左下角向右上角线性渐变-->
<div class="linear11"></div>
<!--从右上角向左下角线性渐变-->
<div class="linear12"></div>
<!--从左上角向右下角线性渐变-->
<div class="linear13"></div>
<!--从右向左渐变-->
<div class="linear14"></div>
<!--径向渐变-->
<div class="linear15"></div>
<!--圆形渐变-->
<div class="linear16"></div>
<!--椭圆渐变-->
<div class="linear17"></div>
<!--可以自定义圆形的方向-->
<div class="linear18"></div> <div class="linear19"></div>
</section>
</body> </html>
动画:这个可以去使用animate.css,当然了引入文件有风险,改起来麻烦,但是你可以直接复制里面的代码,然后自己慢慢改.
@charset "UTF-8"; /*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden
*/ .animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
} .animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
} .animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
} .animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
} .animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
} @-webkit-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} 40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
} 70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
} 90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
} @keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} 40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
} 70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
} 90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
} .bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
} @-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
} 25%, 75% {
opacity: 0;
}
} @keyframes flash {
0%, 50%, 100% {
opacity: 1;
} 25%, 75% {
opacity: 0;
}
} .flash {
-webkit-animation-name: flash;
animation-name: flash;
} /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} 50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
} 100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} @keyframes pulse {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} 50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
} 100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} .pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
} @-webkit-keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} 30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
} 40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
} 50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
} 65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
} 75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
} 100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} @keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} 30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
} 40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
} 50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
} 65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
} 75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
} 100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} .rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
} @-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
} 20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
} @keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
} 20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
} .shake {
-webkit-animation-name: shake;
animation-name: shake;
} @-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
} 40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
} 60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
} 80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
} 100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
} @keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
} 40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
} 60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
} 80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
} 100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
} .swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
} @-webkit-keyframes tada {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} 10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
} 30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
} 40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
} 100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} @keyframes tada {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} 10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
} 30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
} 40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
} 100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} .tada {
-webkit-animation-name: tada;
animation-name: tada;
} /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble {
0% {
-webkit-transform: none;
transform: none;
} 15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
} 30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
} 45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
} 60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
} 75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
} 100% {
-webkit-transform: none;
transform: none;
}
} @keyframes wobble {
0% {
-webkit-transform: none;
transform: none;
} 15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
} 30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
} 45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
} 60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
} 75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
} 100% {
-webkit-transform: none;
transform: none;
}
} .wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
} @-webkit-keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
} 20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
} 40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
} 60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
} 80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
} 100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} @keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
} 20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
} 40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
} 60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
} 80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
} 100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} .bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
} @-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
} 60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
} 75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
} 90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
} 100% {
-webkit-transform: none;
transform: none;
}
} @keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
} 60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
} 75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
} 90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
} 100% {
-webkit-transform: none;
transform: none;
}
} .bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
} @-webkit-keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
} 60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
} 75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
} 90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
} 100% {
-webkit-transform: none;
transform: none;
}
} @keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
} 60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
} 75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
} 90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
} 100% {
-webkit-transform: none;
transform: none;
}
} .bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
} @-webkit-keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
} 60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
} 75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
} 90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
} 100% {
-webkit-transform: none;
transform: none;
}
} @keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
} 60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
} 75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
} 90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
} 100% {
-webkit-transform: none;
transform: none;
}
} .bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
} @-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
} 60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
} 75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
} 90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} @keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
} 0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
} 60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
} 75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
} 90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} .bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
} @-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
} 50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
} 100% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
} @keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
} 50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
} 100% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
} .bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
} @-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
} 40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
} @keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
} 40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
} .bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
} @-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
} @keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
} .bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
} @-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
} @keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
} .bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
} @-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
} 40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
} @keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
} 40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
} .bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
} @-webkit-keyframes fadeIn {
0% {
opacity: 0;
} 100% {
opacity: 1;
}
} @keyframes fadeIn {
0% {
opacity: 0;
} 100% {
opacity: 1;
}
} .fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
} @-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} @keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} .fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
} @-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} @keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} .fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
} @-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} @keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} .fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
} @-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} @keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} .fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
} @-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} @keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} .fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
} @-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} @keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} .fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
} @-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} @keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} .fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
} @-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} @keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} .fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
} @-webkit-keyframes fadeOut {
0% {
opacity: 1;
} 100% {
opacity: 0;
}
} @keyframes fadeOut {
0% {
opacity: 1;
} 100% {
opacity: 0;
}
} .fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
} @-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
} @keyframes fadeOutDown {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
} .fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
} @-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
} @keyframes fadeOutDownBig {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
} .fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
} @-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
} @keyframes fadeOutLeft {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
} .fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
} @-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
} @keyframes fadeOutLeftBig {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
} .fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
} @-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
} @keyframes fadeOutRight {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
} .fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
} @-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
} @keyframes fadeOutRightBig {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
} .fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
} @-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
} @keyframes fadeOutUp {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
} .fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
} @-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
} @keyframes fadeOutUpBig {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
} .fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
} @-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
} 40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
} 50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
} 80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
} 100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
} @keyframes flip {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
} 40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
} 50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
} 80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
} 100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
} .animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
} @-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
} 40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
} 60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
} 80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
} 100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
} @keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
} 40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
} 60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
} 80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
} 100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
} .flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
} @-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
} 40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
} 60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
} 80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
} 100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
} @keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
} 40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
} 60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
} 80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
} 100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
} .flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
} @-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
} 30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
} 100% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
} @keyframes flipOutX {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
} 30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
} 100% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
} .flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
} @-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
} 30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
} 100% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
} @keyframes flipOutY {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
} 30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
} 100% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
} .flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
} @-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
} 60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
} 80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
} 100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
} @keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
} 60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
} 80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
} 100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
} .lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
} @-webkit-keyframes lightSpeedOut {
0% {
opacity: 1;
} 100% {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
} @keyframes lightSpeedOut {
0% {
opacity: 1;
} 100% {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
} .lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
} @-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
} 100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} @keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
} 100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} .rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
} @-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
} 100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} @keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
} 100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} .rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
} @-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
} 100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} @keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
} 100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} .rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
} @-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
} 100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} @keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
} 100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} .rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
} @-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
} 100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} @keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
} 100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
} .rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
} @-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
} 100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
} @keyframes rotateOut {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
} 100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
} .rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
} @-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
} 100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
} @keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
} 100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
} .rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
} @-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
} 100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
} @keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
} 100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
} .rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
} @-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
} 100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
} @keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
} 100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
} .rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
} @-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
} 100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
} @keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
} 100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
} .rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
} @-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
} 20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
} 40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
} 100% {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
} @keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
} 20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
} 40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
} 100% {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
} .hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
} /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} @keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
} 100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
} .rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
} /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
} @keyframes rollOut {
0% {
opacity: 1;
} 100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
} .rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
} @-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
} 50% {
opacity: 1;
}
} @keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
} 50% {
opacity: 1;
}
} .zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
} @-webkit-keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} @keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} .zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
} @-webkit-keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} @keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} .zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
} @-webkit-keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} @keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} .zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
} @-webkit-keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} @keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} .zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
} @-webkit-keyframes zoomOut {
0% {
opacity: 1;
} 50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
} 100% {
opacity: 0;
}
} @keyframes zoomOut {
0% {
opacity: 1;
} 50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
} 100% {
opacity: 0;
}
} .zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
} @-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} @keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} .zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
} @-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
} @keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
} .zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
} @-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
} @keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
} .zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
} @-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} @keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
} 100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
} .zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
} @-webkit-keyframes slideInDown {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} @keyframes slideInDown {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} .slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
} @-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} @keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} .slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
} @-webkit-keyframes slideInRight {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} @keyframes slideInRight {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} .slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
} @-webkit-keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} @keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} .slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
} @-webkit-keyframes slideOutDown {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
} @keyframes slideOutDown {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
} .slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
} @-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
} @keyframes slideOutLeft {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
} .slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
} @-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
} @keyframes slideOutRight {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
} .slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
} @-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
} @keyframes slideOutUp {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
} .slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
仅供参考:
<!DOCTYPE html>
<html>
<head>
<title>动画</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" name="no-store" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta name="renderer" content="webkit">
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="css/template.css" />
<style>
.animate{
width:200px;height:200px;background:#AAAAAA;
animation-name:animate;
animation-duration:3s;
animation-timing-function:ease-in;
animation-delay:2s, 100ms;
-webkit-animation-name:animate;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-delay:.25s, 100ms;
}
@keyframes animate{
0%{
margin-left:20px;
background:#008000;
border-radius:5px;
-webkit-border-radius:5px;
transform:scale(0.25) rotate(60deg);
-webkit-transform:scale(0.25) rotate(60deg);
}
20%{
margin-left:40px;
border-radius:55px;
-webkit-border-radius:55px;
background:#FFA500;
transform: scale(0.5) rotate(120deg);
-webkit-transform:scale(0.5) rotate(120deg);
}
40%{
margin-left:60px;
border-radius:105px;
-webkit-border-radius:105px;
background:#FFA500;
transform: scale(0.75) rotate(180deg);
-webkit-transform:scale(0.75) rotate(180deg);
}
60%{
margin-left:100px;
border-radius:155px;
-webkit-border-radius:155px;
background:#FFA500;
transform: scale(1) rotate(240deg);
-webkit-transform:scale(1) rotate(240deg);
}
80%{
margin-left:150px;
border-radius:180px;
-webkit-border-radius:180px;
background:#FFA500;
transform: scale(1.25) rotate(300deg);
-webkit-transform:scale(1.25) rotate(300deg);
}
100%{
margin-left:200px;
border-radius:200px;
-webkit-border-radius:200px;
background:#AAAAAA;
transform: scale(1.5) rotate(360deg);
-webkit-transform:scale(1.5) rotate(360deg);
}
}
@-webkit-keyframes animate{
0%{
margin-left:20px;
background:#008000;
border-radius:5px;
-webkit-border-radius:5px;
transform:scale(0.25) rotate(60deg);
-webkit-transform:scale(0.25) rotate(60deg);
}
20%{
margin-left:40px;
border-radius:55px;
-webkit-border-radius:55px;
background:#FFA500;
transform: scale(0.5) rotate(120deg);
-webkit-transform:scale(0.5) rotate(120deg);
}
40%{
margin-left:60px;
border-radius:105px;
-webkit-border-radius:105px;
background:#FFA500;
transform: scale(0.75) rotate(180deg);
-webkit-transform:scale(0.75) rotate(180deg);
}
60%{
margin-left:100px;
border-radius:155px;
-webkit-border-radius:155px;
background:#FFA500;
transform: scale(1) rotate(240deg);
-webkit-transform:scale(1) rotate(240deg);
}
80%{
margin-left:150px;
border-radius:180px;
-webkit-border-radius:180px;
background:#FFA500;
transform: scale(1.25) rotate(300deg);
-webkit-transform:scale(1.25) rotate(300deg);
}
100%{
margin-left:200px;
border-radius:200px;
-webkit-border-radius:200px;
background:#AAAAAA;
transform: scale(1.5) rotate(360deg);
-webkit-transform:scale(1.5) rotate(360deg);
}
} /*
animation-name:animate;
animation-duration:秒数或infinite;
animation-timing-function:ease,ease-in,ease-in-out,ease-out,linear,step-start(这些是状态);
animation-delay:延长时间;
animation-iteration-count:播放次数或infinite;
animation-fill-mode: backwards或forwards或none;
*/
/*
@keyframes name{
0%{
里面可以写css样式,或tranform的效果
tranform-orgin:这个是方向:top bottom left right
}
50%{}
100%{}
}
*/
.animated{
width:200px;height:200px;background:#AAAAAA;
animation-name:animated;
animation-duration:0.2s;
animation-timing-function:ease;
animation-iteration-count: infinite;
-webkit-animation-name:animated;
-webkit-animation-duration:0.2s;
-webkit-animation-timing-function:ease;
-webkit-animation-iteration-count: infinite;
} @keyframes animated{
0%{
transform: rotate(180deg);
border-radius:200px;
-webkit-border-radius:200px;
}
100%{
transform: rotate(360deg);
}
} </style>
</head> <body>
<div class="animate"></div>
<div class="animated"></div>
</body> </html>
以下是去取原生样式的方法: -webkit-appearance:none;appearance:none;然后通过一些技巧来达到想要的效果.
八,单选多选去掉原生方法:
很多时候我们会用JS,JQ来做的覆盖,但是能用CSS就别用JS了.现在一般情况下,很多系统都支持.
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" name="no-store" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta name="renderer" content="webkit">
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="css/template.css" />
<style>
.radio,.checkbox{
width:10px;
height: 10px;
margin-bottom:-3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;-webkit-border-radius:10px;
border:2px solid#000000;
outline: none;
} input[type="radio"]:checked{background:#FF69B4;}
input[type="checkbox"]:checked{background:#000000;} </style>
</head> <body>
<form class="">
<label>
<input class="radio" type="radio" name="radio" checked="checked"/><span>单选1</span>
</label>
<label>
<input class="radio" type="radio" name="radio"/><span>单选2</span>
</label>
<label>
<input class="radio" type="radio" name="radio1" checked/><span>单选1</span>
</label>
<label>
<input class="radio" type="radio" name="radio1"/><span>单选2</span>
</label>
<label>
<input class="checkbox" type="checkbox" /><span>复选1</span>
</label>
<label>
<input class="checkbox" type="checkbox" /><span>复选1</span>
</label>
</form>
</body> </html>
九,select下拉框改变右边下拉按钮去掉原生方法:
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" name="no-store" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta name="renderer" content="webkit">
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="css/template.css" />
<style>
select {
width:100%;
height: 50px;
font-size: 18px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333333;
border-radius: 0px;
border:0;
-webkit-border-radius:0px;
background: url(img/drop.png)no-repeat right center;
background-size: contain;
}
.selectContent{margin-top:20px;height:52px;border:1px solid#000000;}
</style>
</head> <body>
<div class="box selectContent">
<select>
<option value="选择1">改变原生select样式</option>
<option value="选择2">选择2</option>
<option value="选择3">选择3</option>
<option value="选择4">选择4</option>
</select>
</div>
</body> </html>
十,文件上传,改变原生方法:
文件上传我是第一次使用,发现原生样式是显示:文件上传这个按钮的,但我们的设计师当然不会让你这样来做页面啦.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" name="no-store" />
<!--浏览器缓存-->
<meta http-equiv="window-target" content="_top" />
<!--防止别人在框架里调用自己的页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<style type="text/css">
.fileInputCon{width:256px;height:256px; background:url(img/avatar1.jpg) no-repeat;position:relative;}
.fileInput{height:256px;overflow: hidden;font-size: 300px;position: absolute;right: 0;top: 0;opacity: 0;filter: alpha(opacity=0);cursor: pointer;}
</style>
</head>
<body>
<div class="fileInputCon">
<input class="fileInput" type="file" name="" id="" />
</div>
</body>
</html>
十一,input框在手机里点击后,被输入法挡住的解决方法:
这里是一个input的焦点事件方法:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>首页</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="window-target" content="_top" /> <!--防止别人在框架里调用自己的页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!--在QQ浏览器,UC浏览器进行强制竖屏，这样就不用担心横屏兼容问题-->
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" /> </head>
<body>
<!--第一种方法:-->
<p id="input">
请输入英文字符：<input type="text" onfocus="focusFun(this);" onblur="blurFun(this);"/>
</p>
<script>
function focusFun(input){
var parent = input.parentNode;
parent.style.backgroundColor="red";
}
function blurFun(input){
var parent = input.parentNode;
parent.style.backgroundColor="green";
} </script> <!--第二种方法:-->
<div id='input'>
<input type='text' onfocus='focusFun(this)'>
</div>
<script>
var lock = true;
function focusFun(elem){
if(lock){
lock = false;
document.getElementById('input').style.margin= '10px';
elem.onblur = function(){
document.getElementById('input').style.margin= '0';
lock = true;
}
}
}
</script>
</body>
</html>
那么如何解决被输入法挡住的问题呢？
你看到我上面追加的样式了吧,是追加到父元素的,用wrapper作为父元素,
然后当input遇到点击时就追加wrapper{padding-bottom:100px},
因为可以通过点击追加让页面升上去的可能性,本来这个解决方法是由专业的原生开发来解决的，我们只能通过技巧来解决.
大概就是这么解释吧.
纯canvas来画出斑的万花筒写轮眼
主要注意的问题：
1，先进行定位，用三角形的角点来定写轮眼的坐标，
2，用二次贝塞尔曲线来画出曲线和弧度。
3，要注意覆盖方面的问题：颜色覆盖，图形覆盖这些问题！
代码如下:(浏览器：火狐，360，谷歌都没问题!)
<!DOCTYPE HTML>
<html>
<body >
<canvas id="myCanvas" style="border:1px solid;" width="400" height="400" ></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
//大圆黑色
context.fillStyle="#000000";
context.globalCompositeOperation="source-over";
context.beginPath();
context.arc(173,195,170,0,Math.PI*2,true);
context.closePath();
context.fill();
//小圆白色
context.fillStyle="#FFFFFF";
context.globalCompositeOperation="source-over";
context.beginPath();
context.arc(173,195,160,0,Math.PI*2,true);
context.closePath();
context.fill();
//中心大圆
/*context.fillStyle="#00CC66";
context.globalCompositeOperation="source-over";
context.beginPath();
context.arc(173,195,120,0,Math.PI*2,true);
context.closePath();
context.fill();*/
//上中圆黑色
context.fillStyle="#000000";
context.beginPath();
context.arc(175,90,37,0,Math.PI*2,true);
context.closePath();
context.fill();
//左圆黑色
context.fillStyle="#000000";
context.beginPath();
context.arc(75,240,37,0,Math.PI*2,true);
context.closePath();
context.fill();
//右圆黑色
context.fillStyle="#000000";
context.beginPath();
context.arc(270,240,37,0,Math.PI*2,true);
context.closePath();
context.fill();
//右边外曲线
context.fillStyle="#000000";
context.beginPath();
context.moveTo(280,206);//右外起点
context.quadraticCurveTo(252,38,161,55);//右上终点
context.lineWidth=2;
context.fill();
//右边内曲线
context.fillStyle="#FFFFFF";
context.beginPath();
context.moveTo(195,120);//右内终点
context.quadraticCurveTo(235,78,280,206);//右内起点
context.lineWidth=2;
context.fill();
//左边外曲线
context.fillStyle="#000000";
context.beginPath();
context.moveTo(138,95);//起点
context.quadraticCurveTo(0,183,46,264);//终点
context.lineWidth=2;
context.fill();
//左边内曲线
context.fillStyle="#FFFFFF";
context.beginPath();
context.moveTo(138,95);//起点
context.quadraticCurveTo(39,196,87,205);//终点
context.lineWidth=2;
context.fill();
//底边外曲线
context.fillStyle="#000000";
context.beginPath();
context.moveTo(96,270);//起点
context.quadraticCurveTo(290,328,305,246);//终点
context.lineWidth=2;
context.fill();
//底边内曲线
context.fillStyle="#FFFFFF";
context.beginPath();
context.moveTo(96,270);//起点
context.quadraticCurveTo(250,290,234,247);//终点
context.lineWidth=2;
context.fill();
//上小圆
context.fillStyle="#FFFFFF";
context.beginPath();
context.arc(270,240,10,0,Math.PI*2,true);
context.closePath();
context.fill();
//左小圆
context.fillStyle="#FFFFFF";
context.beginPath();
context.arc(175,90,10,0,Math.PI*2,true);
context.closePath();
context.fill();
//右小圆
context.fillStyle="#FFFFFF";
context.beginPath();
context.arc(75,240,10,0,Math.PI*2,true);
context.closePath();
context.fill();
//中心圆
context.fillStyle="#000000";
context.globalCompositeOperation="source-over";
context.beginPath();
context.arc(173,195,50,0,Math.PI*2,true);
context.closePath();
context.fill();
//三角形
/* context.strokeStyle="#ff00ff";
context.beginPath();
context.moveTo(175,90);
context.lineTo(75,240);
context.moveTo(175,90);
context.lineTo(270,240);
context.moveTo(75,240);
context.lineTo(270,240);
context.stroke();*/
</script>
</body>
</html>
其他小问题:
大概讲解下文字居中问题,我们平时做居中很简单，但如果遇到文字数量2行或多行不一样的时候,我们就需要额外加个设置了.
我们除了需要将div设置margin-left和margin-right为auto之外，我们还需要给这个div一个宽度,然后子元素设置左对齐，
如果是自适应页面，那么这个div的宽度就得通过断点来发生改变.
<div class="" style="width:75%;margin:0 auto">
<!--多行文本居中要注意宽度,@media来限制不同屏幕的宽度,这里是iphone5-->
<ul style="text-align:left;">
<li>fghjkl</li>
<li>sdsdfghjklsdfghjklsdfghjklfghjkl</li>
</ul>
</div>
1，垂直居中,可以给高度和行高来调整.
2，小图标或图片如何跟 左边或右边 的文字对齐:
可以看看我的CSS样式表，有3个类名:vam,vab,vat总有一个合适你;
再或者就是将图标设置一个margin-bottom为负值调整就可以达到效果了。
以上div+css的学习总结只要有足够的练习和项目操作，就一定可以熟练.
可能是我之前太好运了吧,遇到的公司都是30%项目任务时间,70%学习时间.(但工资特别低).
近期我也挺开心的,可以克服困难把dom学会了,然后就花时间来进行熟练DOM,AJAX,JSON这些.
2015年---移动端webapp知识总结的更多相关文章
- 移动端webapp开发必备知识
移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决 ...
- 移动端WEBAPP开发遇到的坑，以及填坑方案！持续更新~~~~
前言:在移动端WEBAPP开发中会遇到各种各样的问题,通过此文对遇到的问题做一个归纳总结,方便自己日后查询,也给各位前端开发友人做一个参考. 此文中涉及的问题是本人开发中遇到的,解决方案是本人思考 ...
- 2014年---移动端webapp个人年度总结
我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了.(一入门就是移动端开发,是幸运也是艰辛的开始). 我是自学前端的,当然,对Bootstrap,JQuery ...
- 【blade利刃出鞘】一起进入移动端webapp开发吧
前言 在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说 第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 ...
- 移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂
为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例gi ...
- 【一起来烧脑】读懂WebApp知识体系
背景 很多小白知道什么是app,但是却不知道什么是webapp呢,webapp是指用HTML5编写的移动web应用 一个webapp可以在pc端,Android端,ios端进行运行 webapp开发的 ...
- 移动端css知识总结--字体，毛玻璃效果，input和disabled
移动端字体使用: font-family: Helvetica,sans-serif;我看这也是天猫使用的 透过背景看其他元素模糊,自身元素不模糊:-webkit-backdrop-filter: s ...
- 基于Vue2 搭建移动端 webapp 框架
Vue.js2.0作为国内热门并广为人知的前端框架,其与其他主流框架的优势在此不做过多赘述.搭建框架步骤如下: 转自:http://www.jianshu.com/p/beae26e57b0f 安装N ...
- 移动端webapp如何隐藏浏览器的导航栏
webapp如何隐藏浏览器的导航栏 在webapp开发中,手机浏览器的导航栏会让我们的页面看起来很怪异,这个时候我们就需要将导航栏给隐藏起来,隐藏的方法十分简单,只需要在head头中加入以下几行代码就 ...
随机推荐
- linux下命令运行目录上程序前面要加./
linux命令行上默认运行path系统变量的路径的程序,所以我们在运行时命令时会在系统变量中查找,而发现查找完系统变量之后是不会再查找当前目录的. 有以下方式解决: 1.在运行当前目录的程序时,前面加 ...
- git恢复误删文件及省去密码提交
自己遇到这种情况:自己将某文件在网页的控制面板上直接删除了,再pull下来.或者一个成员误删除了某个文件,然后push到远程库了,其他成员也都pull了,结果就是所有人的本地库当前版本中这个文件都不见 ...
- 【翻译自nikic大神】PHP中原生类型的方法
引言 第一次,翻译别人的文章,用四级英语的水平来翻译~~囧,可能有很多不太恰当的地方,尽管拍砖(有些地方实在想不到恰当的翻译,我同时贴出了原文和自己很low的翻译). 翻译这篇文章用了我3个晚上一个中 ...
- easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
- Codeforces 711E ZS and The Birthday Paradox
传送门 time limit per test 2 seconds memory limit per test 256 megabytes input standard input output st ...
- [转]virtualenv and virtualenvwrapper
转自 http://liuzhijun.iteye.com/blog/1872241 virtualenv virtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能 ...
- PHP ServerPush (推送) 技术的探讨
2016年11月29日17:51:03 转自:http://www.cnblogs.com/hnrainll/archive/2013/05/07/3064874.html 需求: 我想做个会员站内通 ...
- 强大的windbg定位内存泄露，两句命令搞定！
1.简单配置在windbg程序目录下有个gflags.exe,运行后设置: 运行CMD.EXE,输入"D:\Debugging Tools for Windows (x86)\gflags. ...
- android toast几种使用方法
toast经常会用到,今天做个总结,特别是自定义toast的布局,值得一看. 一.默认展示 // 第一个参数:当前的上下文环境.可用getApplicationContext()或this // 第二 ...
- CSS3系列一（概述、选择器、使用选择器插入内容）
CSS3模块化结构 CSS历史发展 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS3属性选择器 E[att ...