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