1 CSS屬性
1.1 濾鏡
1.1.1 blur屬性
1.1.1.1 代碼示例
CSS代碼：
.blur {??
??? filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
??? -webkit-filter: blur(10px); /* Chrome, Opera */
?????? -moz-filter: blur(10px);
??????? -ms-filter: blur(10px);???
??????????? filter: blur(10px);
??? filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,
MakeShadow=false); /* IE6~IE9 */
}
HTML代碼：
效果：
1.1.1.2 兼容性
????????綠色即是可支持版本
1.2 變形(transform)
????????在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate诈茧、扭曲skew奔脐、縮放scale和移動translate以及矩陣變形matrix姑原。
1.2.1 語法
1.2.1.1 語法格式
??transform：none | [ ]*
?? ????也就是：
?transform: rotate | scale | skew | translate|matrix;
????????none:表示不進(jìn)么變換箕速；表示一個或多個變換函數(shù)园欣，以空格分開；換句話說就是我們同時對一個元素進(jìn)行transform的多種屬性操作取董，例如rotate棍苹、scale、translate三種茵汰，但這里需要提醒大家的枢里，以往我們疊加效果都是用逗號（“，”）隔開，但transform中使用多個屬性時卻需要有空格隔開坡垫。大家記住了是空格隔開梭灿。
????取值：
????????transform屬性實現(xiàn)了一些可用SVG實現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)(inline)元素和塊級(block)元素冰悠。它允許我們旋轉(zhuǎn)、縮放和移動元素 配乱，他有幾個屬性值參數(shù)：rotate;translate;scale;skew;matrix溉卓。
1.2.1.2 transform在不同瀏覽器內(nèi)核下的書寫規(guī)則
? //Mozilla內(nèi)核瀏覽器：firefox3.5+
? -moz-transform:rotate | scale | skew | translate ;
?//Webkit內(nèi)核瀏覽器：Safariand Chrome
?-webkit-transform: rotate | scale | skew | translate ;
?//Opera
? -o-transform:rotate | scale | skew | translate ;
?//IE9
? -ms-transform:rotate | scale | skew | translate ;
?//W3C標(biāo)準(zhǔn)
? transform: rotate| scale | skew | translate ;
1.2.1.3 瀏覽器支持版本
1.2.2 旋轉(zhuǎn)rotate
????????rotate()：通過指定的角度參數(shù)對原元素指定一個2D rotation（2D旋轉(zhuǎn)），需先有transform-origin屬性的定義搬泥。transform-origin定義的是旋轉(zhuǎn)的基點桑寨，其中angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時針旋轉(zhuǎn)忿檩，如果設(shè)置的值為負(fù)數(shù)尉尾，則表示逆時針旋轉(zhuǎn)。如：transform:rotate(30deg):
1.2.3 移動translate
????????移動translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）燥透；translateX(x)僅水平方向移動（X軸移動）沙咏；translateY(Y)僅垂直方向移動（Y軸移動），具體使用方法如下：
????????1班套、translate([,])：通過矢量[tx, ty]指定一個2D translation肢藐，tx是第一個過渡值參數(shù)，ty是第二個過渡值參數(shù)選項吱韭。如果 未被提供吆豹，則ty以0作為其值。也就是translate(x,y),它表示對象進(jìn)行平移理盆，按照設(shè)定的x,y參數(shù)值,當(dāng)值為負(fù)數(shù)時痘煤，反方向移動物體，其基點默認(rèn)為元素 中心點猿规，也可以根據(jù)transform-origin進(jìn)行改變基點衷快。如transform:translate(100px,20px):
????????2、translateX()： 通過給定一個X方向上的數(shù)目指定一個translation坎拐。只向x軸進(jìn)行移動元素烦磁，同樣其基點是元素中心點，也可以根據(jù)transform-origin改變基點位置哼勇。如：transform:translateX(100px):
3都伪、translateY()：通過給定Y方向的數(shù)目指定一個translation。只向Y軸進(jìn)行移動积担，基點在元素心點陨晶，可以通過transform-origin改變基點位置。如：transform:translateY(20px):
1.2.4 縮放scale
????????縮放scale和移動translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）先誉；scaleX(x)元素僅水平方向縮放（X軸縮放）湿刽；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點和基數(shù)褐耳，其中心點就是元素的中心位置诈闺，縮放基數(shù)為1，如果其值大于1元素就放大铃芦，反之其值小于1雅镊，元素縮小。下面我們具體來看看這三種情況具體使用方法：
????????1刃滓、scale([,])：提供執(zhí)行[sx,sy]縮放矢量的兩個參數(shù)指定一個2D scale（2D縮放）仁烹。如果第二個參數(shù)未提供，則取與第一個參數(shù)一樣的值咧虎。scale(X,Y)是用于對元素進(jìn)行縮放卓缰，可以通過transform-origin對元素的基點進(jìn)行設(shè)置，同樣基點在元素中心位置砰诵；基中X表示水平方向縮放的倍數(shù)征唬，Y表示垂直方向的縮放倍數(shù)，而Y是一個可選參數(shù)胧砰，如果沒有設(shè)置Y值鳍鸵，則表示X，Y兩個方向的縮放倍數(shù)是一樣的尉间。并以X為準(zhǔn)偿乖。如：transform:scale(2,1.5):
????????2、scaleX()： 使用[sx,1]縮放矢量執(zhí)行縮放操作哲嘲，sx為所需參數(shù)贪薪。scaleX表示元素只在X軸(水平方向)縮放元素，他的默認(rèn)值是(1,1)眠副，其基點一樣是在元素的中心位置画切，我們同樣是通過transform-origin來改變元素的基點白胀。如：transform:scaleX(2):
????????3错忱、scaleY()： 使用[1,sy]縮放矢量執(zhí)行縮放操作，sy為所需參數(shù)身弊。scaleY表示元素只在Y軸（垂直方向）縮放元素娃弓，其基點同樣是在元素中心位置典格，可以通過transform-origin來改變元素的基點。如transform:scaleY(2):
1.2.5 扭曲skew
????????扭曲skew和translate台丛、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進(jìn)行扭曲變形）耍缴；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形），具體使用如下：
????????1防嗡、skew( [, ])：X軸Y軸上的skew?transformation（斜切變換）变汪。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸蚁趁。如果第二個參數(shù)未提供裙盾，則值為0，也就是Y軸方向上無斜切他嫡。skew是用來對元素進(jìn)行扭曲變行闷煤，第一個參數(shù)是水平方向扭曲角度，第二個參數(shù)是垂直方向扭曲角度涮瞻。其中第二個參數(shù)是可選參數(shù)，如果沒有設(shè)置第二個參數(shù)假褪，那么Y軸為0deg署咽。同樣是以元素中心為基點，我們也可以通過transform-origin來改變元素的基點位置生音。如：transform:skew(30deg,10deg):
????????2宁否、skewX()： 按給定的角度沿X軸指定一個skew?transformation（斜切變換）。skewX是使元素以其中心為基點缀遍，并在水平方向（X軸）進(jìn)行扭曲變行慕匠，同樣可以通過transform-origin來改變元素的基點。如：transform:skewX(30deg)
????????3域醇、skewY()： 按給定的角度沿Y軸指定一個skew?transformation（斜切變換）台谊。skewY是用來設(shè)置元素以其中心為基點并按給定的角度在垂直方向（Y軸）扭曲變形。同樣我們可以通過transform-origin來改變元素的基點譬挚。如：transform:skewY（10deg）
1.2.6 矩陣matrix
????????matrix(, ,, , , )： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換锅铅，相當(dāng)于直接應(yīng)用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素减宣。
1.2.7 改變元素基點transform-origin
????????要作用就是讓我們在進(jìn)行transform動作之前可以改變元素的基點位置盐须，因為我們元素默認(rèn)基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下漆腌，transform進(jìn)行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進(jìn)行變化的贼邓。
????????transform-origin(X,Y):用來設(shè)置元素的運(yùn)動的基點（參照點）。默認(rèn)點是元素的中心點闷尿。其中X和Y的值可以是百分值,em,px塑径，其中X也可以是字符參數(shù)值left,center,right；Y和X一樣除了百分值外還可以設(shè)置字符值top,center,bottom悠砚，這個看上去有點像我們background-position設(shè)置一樣晓勇；下面我列出他們相對應(yīng)的寫法：
????1、top left |left top等價于0 0 | 0% 0%
????2、top | top center | center top等價于50% 0
????3绑咱、right top |top right等價于100% 0
????4绰筛、left | left center | center left等價于0 50% | 0% 50%
????5、center |center center等價于50% 50%（默認(rèn)值）
????6描融、right |right center | center right等價于100% 50%
????7铝噩、bottom left| left bottom等價于0 100% | 0% 100%
????8、bottom |bottom center | center bottom等價于50% 100%
????9窿克、bottom right| right bottom等價于100% 100%
????????其中l(wèi)eft, center right是水平方向取值骏庸，對應(yīng)的百分值為left=0%; center=50%; right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一個值年叮，表示垂直方向值不變具被，我們分別來看看以下幾個實例
(1)transform-origin: (left, top):
(2)transform-origin: right
(3)transform-origin(25%,75%)
????????更多的改變中心基點辦法，大家可以在本地多測試一下只损，多體會一下一姿，這里還要提醒大家一點的是，transform-origin并不是transform中的屬性值跃惫，他具有自己的語法叮叹，前面我也說過了，說簡單一點就是類似于我們的background-position的用法爆存，但又有其不一樣蛉顽，因為我們background-position不需要區(qū)別瀏覽器內(nèi)核不同的寫法，但transform-origin跟其他的css3屬性一樣先较，我們需要在不同的瀏覽內(nèi)核中加上相應(yīng)的前綴携冤，下面列出各種瀏覽器內(nèi)核下的語法規(guī)則：
? //Mozilla內(nèi)核瀏覽器：firefox3.5+
? -moz-transform-origin: x y;
? //Webkit內(nèi)核瀏覽器：Safari and Chrome
? -webkit-transform-origin: x y;
? //Opera
? -o-transform-origin: x y ;
? //IE9
? -ms-transform-origin: x y;
? //W3C標(biāo)準(zhǔn)
? transform-origin: x y ;
1.2.8 示例
1.2.8.1 transform: translateX(x)示例
HTML代碼：
CSS代碼：
?.menu ul li.translate-x a: hover {
??? -moz-transform: translateX(-10px);
??? -webkit-transform: translateX(-10px);
??? -o-transform: translateX(-10px);
??? -ms-transform: translateX(-10px);
??? transform: translateX(-10px);?????????
? }
1.3 轉(zhuǎn)換(transition)
1.4 動畫(animation)
1.4.1 CSS3 @keyframes規(guī)則
????????如需在CSS3中創(chuàng)建動畫，您需要學(xué)習(xí)@keyframes規(guī)則拇泣。@keyframes 規(guī)則用于創(chuàng)建動畫噪叙。在 @keyframes 中規(guī)定某項 CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果霉翔。
1.4.1.1 瀏覽器支持
????????Internet Explorer 10睁蕾、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性。
Chrome 和 Safari 需要前綴 -webkit-债朵。
1.4.1.2 實例
@keyframes myfirst
{
????from {background: red;}
????to {background: yellow;}
}
@-moz-keyframes myfirst/* Firefox */
{
????from {background: red;}
????to {background: yellow;}
}
@-webkit-keyframes myfirst/* Safari 和 Chrome */
{
????from {background: red;}
????to {background: yellow;}
}
@-o-keyframes myfirst/* Opera */
{
????from {background: red;}
????to {background: yellow;}
}
1.4.1.3 CSS3動畫使用規(guī)則
????????當(dāng)您在 @keyframes 中創(chuàng)建動畫時子眶，請把它捆綁到某個選擇器，否則不會產(chǎn)生動畫效果序芦。
通過規(guī)定至少以下兩項 CSS3 動畫屬性臭杰，即可將動畫綁定到選擇器：
????? 規(guī)定動畫的名稱;
????? 規(guī)定動畫的時長;
實例
????????把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒：
div
{
????animation: myfirst 5s;
????-moz-animation: myfirst 5s; /* Firefox */
????-webkit-animation: myfirst 5s;?? /* Safari 和 Chrome */
????-o-animation: myfirst 5s;?? /* Opera */
}
? ??????注釋：您必須定義動畫的名稱和時長谚中。如果忽略時長渴杆，則動畫不會允許寥枝，因為默認(rèn)值是0。
1.4.2 用百分比定義動畫關(guān)鍵幀變化時間點
????????請用百分比來規(guī)定變化發(fā)生的時間磁奖，或用關(guān)鍵詞"from" 和 "to"囊拜，等同于 0% 和 100%。0%是動畫的開始比搭，100%是動畫的完成冠跷。
????????為了得到最佳的瀏覽器支持，您應(yīng)該始終定義0% 和100% 選擇器身诺。
?
實例
改變背景色和位置：
@keyframes myfirst
{
????0%?? {background: red; left:0px;top:0px;}
????25%? {background: yellow;left:200px; top:0px;}
????50%? {background: blue; left:200px; top:200px;}
????75%? {background: green; left:0px;top:200px;}
????100% {background: red; left:0px; top:0px;}
}
@-moz-keyframes myfirst/* Firefox */
{
????0%?? {background: red; left:0px;top:0px;}
????25%? {background: yellow;left:200px; top:0px;}
????50%? {background: blue; left:200px;top:200px;}
????75%? {background: green; left:0px;top:200px;}
????100% {background: red; left:0px; top:0px;}????
}
@-webkit-keyframes myfirst/* Safari 和 Chrome */
{
????0%?? {background: red; left:0px;top:0px;}
????25%? {background: yellow;left:200px; top:0px;}
????50%? {background: blue; left:200px;top:200px;}
????75%? {background: green; left:0px;top:200px;}
????100% {background: red; left:0px; top:0px;}
}
@-o-keyframes myfirst/* Opera */
{
????0%?? {background: red; left:0px;top:0px;}
????25%? {background: yellow; left:200px;top:0px;}
????50%? {background: blue; left:200px;top:200px;}
????75%? {background: green; left:0px;top:200px;}
????100% {background: red; left:0px; top:0px;}
}
1.4.3 CSS3動畫屬性
????????下面的表格列出了 @keyframes 規(guī)則和所有動畫屬性：
????????下面的兩個例子設(shè)置了所有動畫屬性：
實例
????????運(yùn)行名為 myfirst 的動畫蜜托，其中設(shè)置了所有動畫屬性：
div
{
????animation-name: myfirst;
????animation-duration: 5s;
????animation-timing-function: linear;
????animation-delay: 2s;
????animation-iteration-count: infinite;
????animation-direction: alternate;
????animation-play-state: running;
????/* Firefox: */
????-moz-animation-name: myfirst;
????-moz-animation-duration: 5s;
????-moz-animation-timing-function: linear;
????-moz-animation-delay: 2s;
????-moz-animation-iteration-count: infinite;
????-moz-animation-direction: alternate;
????-moz-animation-play-state: running;
????/* Safari 和 Chrome: */
????-webkit-animation-name: myfirst;
????-webkit-animation-duration: 5s;
????-webkit-animation-timing-function: linear;
????-webkit-animation-delay: 2s;
????-webkit-animation-iteration-count: infinite;
????-webkit-animation-direction: alternate;
????-webkit-animation-play-state: running;
????/* Opera: */
????-o-animation-name: myfirst;
????-o-animation-duration: 5s;
????-o-animation-timing-function: linear;
????-o-animation-delay: 2s;
????-o-animation-iteration-count: infinite;
????-o-animation-direction: alternate;
????-o-animation-play-state: running;
}
實例
????????與上面的動畫相同，但是使用了簡寫的動畫 animation 屬性：
div
{
????animation: myfirst 5s linear 2s infinitealternate;
????/* Firefox: */
????-moz-animation: myfirst 5s linear 2s infinitealternate;
????/* Safari 和 Chrome: */
????-webkit-animation: myfirst 5s linear 2s infinitealternate;
????/* Opera: */
????-o-animation: myfirst 5s linear 2s infinitealternate;
}
1.4.4 CSS3 animation-timing-function屬性
????實例
????????從開頭到結(jié)尾以相同的速度來播放動畫：
div
{
????animation-timing-function:2s;
????-webkit-animation-timing-function:2s;/* Safari 和 Chrome */
}
1.4.4.1 定義和用法
????????animation-timing-function 規(guī)定動畫的速度曲線霉赡。
????????速度曲線定義動畫從一套 CSS 樣式變?yōu)榱硪惶姿玫臅r間橄务。速度曲線用于使變化更為平滑。
默認(rèn)值：ease
繼承性：no
版本：CSS3
JavaScript 語法：object.style.animationTimingFunction="linear"
1.4.4.2 語法
animation-timing-function:value;
????????animation-timing-function 使用名為三次貝塞爾（Cubic Bezier）函數(shù)的數(shù)學(xué)函數(shù)穴亏，來生成速度曲線仪糖。您能夠在該函數(shù)中使用自己的值，也可以預(yù)定義的值：
? ??????提示：請試著在下面的“親自試一試”功能中使用不同的值迫肖。
2 通用樣式
2.1 第三方樣式庫
微信UI樣式庫
微信網(wǎng)頁開發(fā)樣式庫
https://mp.weixin.qq.com/wiki/2/ae9782fb42e47ad79eb7b361c2149d16.html
2.2? 常用樣式范例
2.2.1 音波擴(kuò)散動畫
css3波浪形loading動畫
http://www.cnblogs.com/djdliu/p/6120929.html
.loading {
? width: 100%;
? height: 100%;
? background: #014a9c;
? position: relative;
}
.show {
? width: 50px;
? height: 50px;
? border-radius: 100%;
? position: absolute;
? left: 50%;
? top: 50%;
? margin-top: -25px;
? margin-left: -25px;
? animation: sploosh4s ease-in-out both infinite;
? -webkit-animation:sploosh 4s ease-in-out both infinite;
? background: rgba(66,166, 223, 0.7);
}
.show_02 {
?-webkit-animation-delay: -0.8s;
? animation-delay:-0.8s;
}
.show_03 {
?-webkit-animation-delay: -1.6s;
? animation-delay:-1.6s;
}
.show_04 {
?-webkit-animation-delay: -2.4s;
? animation-delay:-2.4s;
}
.show_05 {
?-webkit-animation-delay: -3.2s;
? animation-delay:-3.2s;
}
@-webkit-keyframes sploosh {
? 0% {
??? box-shadow: 0 0 00 rgba(66, 166, 223, 0.7);
??? background:rgba(66, 166, 223, 0.7);
? }
? 100% {
??? box-shadow: 0 0 0250px rgba(66, 166, 223, 0);
??? background:rgba(66, 166, 223, 0);
? }
}
@keyframes sploosh {
? 0% {
??? box-shadow: 0 0 00 rgba(66, 166, 223, 0.7);
??? background:rgba(66, 166, 223, 0.7);
? }
? 100% {
??? box-shadow: 0 0 0250px rgba(66, 166, 223, 0);
??? background:rgba(66, 166, 223, 0);
? }
}
2.2.2 波浪動畫
http://www.zaole.net/demo/201605061144.html
3 參考鏈接
小tip:使用CSS將圖片轉(zhuǎn)換成模糊(毛玻璃)效果
http://www.zhangxinxu.com/wordpress/2013/11/小tip-使用css將圖片轉(zhuǎn)換成模糊毛玻璃效果/
CSS3 Transform
http://www.w3cplus.com/content/css3-transform/
CSS Grid布局指南
-webkit-overflow-scrolling: touch導(dǎo)致Native滾動時出現(xiàn)黑色背景
http://www.reibang.com/p/171b8b7761cb
Webkit overflow scrolling touch CSS bug on iPad
http://stackoverflow.com/questions/9084118/webkit-overflow-scrolling-touch-css-bug-on-ipad/12477554
-webkit-overflow-scrolling帶來的BUG
http://www.tuicool.com/articles/U73Erq
iOS8 Safari -webkit-overflow-scrolling: touch; issue
http://stackoverflow.com/questions/26738764/ios8-safari-webkit-overflow-scrolling-touch-issue
總結(jié)移動端頁面開發(fā)時需要注意的一些問題
http://blog.csdn.net/lz305263/article/details/52211850
運(yùn)用webkit繪制渲染頁面原理解決iscroll4閃動的問題
http://www.cnblogs.com/aaronjs/p/3147461.html
解決iOS webkit使用CSS動畫時閃爍的問題
http://blog.meathill.com/tech/js/phonegap-js/fix-page-flash-in-ios-webkit.html
CSS3中-webkit-overflow-scrolling:touch的使用方法詳解
http://www.111cn.net/cssdiv/css/108397.htm
How to fix flicker when using Webkit transforms &transitions
iOS8 webkit-overflow-scrolling:touch with overlay
http://stackoverflow.com/questions/27934845/ios8-webkit-overflow-scrollingtouch-with-overlay
iOS 9 `-webkit-overflow-scrolling:touch` and `overflow:scroll` breaks scrolling capability
Webkit渲染引擎導(dǎo)致頁面閃動
http://diyitui.com/content-1393921248.2615296.html
iscroll在iphone瀏覽器上閃動的BUG
http://www.jslover.com/code/413.html#
用scrollTop制作一個自動滾動公告欄
http://www.cnblogs.com/ooooevan/p/5551104.html
iOS5 Images disappear when scrolling withwebkit-overflow-scrolling: touch
CSS3 property webkit-overflow-scrolling:touch ERROR
http://stackoverflow.com/questions/7808110/css3-property-webkit-overflow-scrollingtouch-error
100% screen height css
http://stackoverflow.com/questions/7357818/100-screen-height-css
-webkit-overflow-scrolling: touch導(dǎo)致Native滾動時出現(xiàn)黑色背景
http://www.reibang.com/p/171b8b7761cb
-webkit-overflow-scrolling: touch; breaks in Apple's iOS8
`-webkit-overflow-scrolling: touch` broken for initiallyoffscreen elements in iOS7
iOS8 Safari -webkit-overflow-scrolling: touch; issue
http://stackoverflow.com/questions/26738764/ios8-safari-webkit-overflow-scrolling-touch-issue
How we fixed the -webkit-overflow-scrolling: touch; bug oniOS
http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/
-webkit-overflow-scrolling帶來的BUG
http://www.tuicool.com/articles/U73Erq
CSS教程
http://www.w3school.com.cn/css/index.asp
微信UI樣式庫
CSS3陰影box-shadow的使用和技巧總結(jié)
