2015年---移动端webapp知识总结
没想到这样又过了5个月了,近期辞职了，因此我有时间来作总结.javascript
这段时间里我学习了不少东西，并且都是咱们移动端webapp的同窗值得去学习的。css
我先告诉你们我此次写的总结，有如下内容:html
1.body的背景图，img图片自适应,切图小技巧.前端
2.字体rem自适应问题.java
3.@media的断点分析.ios
4.页面布局:盒子模型.git
5.CSS3选择器和H5新标签的使用.github
6.表单经常使用的正则验证.web
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">
/*视区宽度不大于像素时候，图片实际尺寸像素*/360340
/* 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:0;-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:0;padding:0;-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:500}strong{font-weight:700}a:focus{outline:thin dotted}a:focus{-webkit-user-modify:read-write-plaintext-only}a,a:active,a:hover{text-decoration:none}a{outline:0;background:0 0}fieldset,img{border:0}img,video{max-width:100%}em,i{font-style:normal}table{border-collapse:collapse;border-spacing:0}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}del{text-decoration:line-through}hr{height:0;-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:0}.grid:after{clear:both}.grid{margin:0;padding:0;list-style-type:none}.grid>.grid{float:left;clear:none;margin:0!important} sub,sup{font-size:75%;line-height:0;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:0;padding:0;-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:0}
/*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:0;top:0;z-index:9994;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:2;-webkit-box-orient:vertical}
/*容器*/ .wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding-bottom:60px;overflow:auto;-webkit-overflow-scrolling:touch}
/*头尾*/ .header,.footer{position:fixed;right:0;left:0;z-index:1} .header{top:0;height:44px} .footer{bottom:0}
/*宽度*/ .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:1;flex:1;-webkit-box-flex:1}
/*垂直方向*/ .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:1;-webkit-flex:1;flex:1} .flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2} .flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3} .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的焦点事件方法:
View Code
<!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这些.
相关文章
- 1. 移动端webapp开发必备知识
- 2. 移动前端知识总结
- 3. H5移动端知识点总结
- 4. 移动端知识的一些总结
- 5. 移动端知识点部分总结
- 6. 移动webapp前端
- 7. 2015年总结
- 8. #2015年总结
- 9. 移动端知识
- 10. web前端 —— 移动端知识的一些总结
- 更多相关文章...
- • 移动设备 统计 - 浏览器信息
- • 与传输层有关的基本知识 - TCP/IP教程
- • 算法总结-滑动窗口
- • 算法总结-双指针
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 移动端webapp开发必备知识
- 2. 移动前端知识总结
- 3. H5移动端知识点总结
- 4. 移动端知识的一些总结
- 5. 移动端知识点部分总结
- 6. 移动webapp前端
- 7. 2015年总结
- 8. #2015年总结
- 9. 移动端知识
- 10. web前端 —— 移动端知识的一些总结