第5章CSS特效《HTML5+CSS3+Bootstrap響應(yīng)式Web前端設(shè)計(jì)（第2版）》目錄/Contents5.1濾鏡5.2過渡5.3動畫5.4轉(zhuǎn)換5.45.5項(xiàng)目濾鏡5.15.1濾鏡CSS3的濾鏡（filter）屬性提供了模糊和改變元素顏色的功能，常用于調(diào)整圖像的渲染、背景或邊框顯示效果。多個濾鏡之間用空格隔開。

filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();5.1濾鏡filter的屬性屬性值描述屬性值描述grayscale灰度opacity透明度sepia褐色brightness亮度saturate飽和度contrast對比度hue-rotate色相旋轉(zhuǎn)blur模糊invert反色drop-shadow陰影urlurl函數(shù)接收一個XML文件，該文件設(shè)置了一個SVG濾鏡，且可以包含一個錨點(diǎn)來指定一個具體的濾鏡元素。例如：filter:url(svg-url#element-id)#romance

{

-webkit-filter:

grayscale(100%);

/*Chrome,Safari,Opera*/

filter:

grayscale(100%);}舉例（filter-grayscale）灰度grayscale()grayscale()用于將圖像轉(zhuǎn)換為灰度圖像。grayscale()參數(shù)值為0～1的小數(shù)，也支持0%～100%百分比的形式。如果沒有任何參數(shù)值，默認(rèn)將以“100%”渲染。#romance{-webkit-filter:blur(5px);/*Chrome,Safari,Opera*/filter:blur(5px);}舉例（filter-blur）模糊blur()blur()用于給圖像設(shè)置高斯模糊。參數(shù)值設(shè)置為高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，因此值越大越模糊。#romance{-webkit-filter:brightness(200%);/*Chrome,Safari,Opera*/filter:brightness(200%);}舉例（filter-brightness）brightness()用于調(diào)整圖像的亮度，默認(rèn)值為100%或者1。如果其值超過100%，就意味著圖片擁有更高的亮度。如果值是0%，圖像會全黑。值是100%，則圖像無變化。亮度brightness()#romance{-webkit-filter:contrast(500%);/*Chrome,Safari,Opera*/filter:contrast(500%);}舉例（filter-contrast）調(diào)整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。超過100％的值將提供更具對比度的結(jié)果。若沒有設(shè)置值，默認(rèn)是1。對比度contrast()drop-shadow()用于給圖像設(shè)置一個陰影效果。<offset-x><offset-y>（必選）：<offset-x>可設(shè)置水平方向的距離，負(fù)值會使陰影出現(xiàn)在元素的左邊；<offset-y>可設(shè)置垂直方向的距離，負(fù)值會使陰影出現(xiàn)在元素的上方。如果兩個值都是0,則陰影出現(xiàn)在元素正后方。<blur-radius>（可選）：值越大，越模糊，則陰影會變得更大更淡。不允許負(fù)值，若未設(shè)置，默認(rèn)值為0（陰影的邊界很銳利）。<spread-radius>（可選）：正值會使陰影擴(kuò)張或變大，負(fù)值會使陰影縮小。若未設(shè)置，默認(rèn)值為0（陰影會與元素一樣大?。?。<color>（可選）：若未設(shè)置該屬性，顏色值將根據(jù)瀏覽器的默認(rèn)設(shè)置來進(jìn)行顯示。舉例（drop-shadow）#romance{ filter:drop-shadow(15px15px8px#222);}陰影drop-shadow()filter:drop-shadow(30px10px4px#4444dd);filter:drop-shadow(0-6mm4mmrgb(160,0,210));filter:drop-shadow(000.75remcrimson);舉例（drop-shadow）陰影drop-shadow()這個函數(shù)有點(diǎn)類似于box-shadow屬性。box-shadow屬性在元素的整個框后面創(chuàng)建一個矩形陰影，而drop-shadow()過濾器則是創(chuàng)建一個符合圖像本身形狀(alpha通道)的陰影。Tipdrop-shadow和box-shadow相似，都是實(shí)現(xiàn)投影效果,它們有什么區(qū)別呢？box-shadow陰影可以任意疊加，drop-shadow不能陰影疊加，但是它是真正意義上的投影！而box-shadow只是盒陰影而已。舉例（box-shadow3）（box-shadow4）（區(qū)別1）（區(qū)別2）陰影drop-shadow()#romance90{-webkit-filter:hue-rotate(90deg);/*Chrome,Safari,Opera*/filter:hue-rotate(90deg);}#romance180{-webkit-filter:hue-rotate(180deg);/*Chrome,Safari,Opera*/filter:hue-rotate(180deg);}#romance270{-webkit-filter:hue-rotate(270deg);/*Chrome,Safari,Opera*/filter:hue-rotate(270deg);}舉例（filter-hue-rotate）hue-rotate()設(shè)置圖像應(yīng)用色相旋轉(zhuǎn)。取值為0deg，則圖像無變化。若值未設(shè)置，默認(rèn)值為0deg。該值沒有最大值，超過360deg時相當(dāng)于又繞一圈。色相旋轉(zhuǎn)hue-rotate()#romance{-webkit-filter:invert(100%);/*Chrome,Safari,Opera*/filter:invert(100%);}舉例（filter-invert）invert反色會把圖片變成底片的感覺值為100%是完全反轉(zhuǎn)值為0%則圖像無變化反相invert()#romance{-webkit-filter:opacity(30%);/*Chrome,Safari,Opera*/filter:opacity(30%);}舉例（filter-opacity）透明度opacity()opacity()用于定義透明度，默認(rèn)值為1。值為0%則圖像完全透明，值為100%則圖像不透明。該函數(shù)與已有的opacity屬性相似。

.opacity{

opacity:0.5;

filter:alpha(opacity=50);

}所有瀏覽器都支持opacity屬性，IE8及更早的版本支持替代的filter屬性。filter:alpha(opacity=number)，number取值[0~100],0完全透明，100不透明。所以為兼容可寫為：透明度opacity()舉例（filter-opacity）#romance{-webkit-filter:saturate(300%);/*Chrome,Safari,Opera*/filter:saturate(300%);}舉例（filter-saturate）定義圖像飽和度。值為0%是完全不飽和，值為100%則圖像無變化。超過100%的值是允許的，表示具有更高的飽和度。默認(rèn)值為1。飽和度saturate()#romance{-webkit-filter:sepia(100%);/*Chrome,Safari,Opera*/filter:sepia(100%);}舉例（filter-sepia）將圖像轉(zhuǎn)換為深褐色。參數(shù)值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。默認(rèn)值為0.褐色sepia()filter可以整合多個濾鏡，濾鏡之間可使用空格分隔開。#romance{-webkit-filter:grayscale(50%)sepia(50%);/*Chrome,Safari,Opera*/filter:grayscale(50%)sepia(50%);}舉例（filter）符合函數(shù)filter()順序是非常重要的(例如使用grayscale()后再使用sepia()將產(chǎn)生一個完整的灰度圖片)。Tip過渡5.2transition簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。transition-property規(guī)定應(yīng)用過渡的CSS屬性的名稱。transition-duration定義過渡效果花費(fèi)的時間。transition-timing-function規(guī)定過渡效果的時間曲線。transition-delay規(guī)定過渡效果何時開始。CSS3過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：1、指定要添加效果的CSS屬性。2、指定效果的持續(xù)時間。Transition過渡把鼠標(biāo)指針放到div元素上，其高度會從100px逐漸變?yōu)?00px。舉例（transition）div{width:100px;background:blue;

height:100px; transition:height2sease-in-out1s; -moz-transition:height2sease-in-out1s; -webkit-transition:height2sease-in-out1s; -o-transition:height2sease-in-out1s;}div:hover{height:300px;}Transition過渡div{width:100px;}div:hover{width:300px;transition:width2s;-moz-transition:width2s;-webkit-transition:width2s;-o-transition:width2s;}把鼠標(biāo)指針放到div元素上，其寬度會從100px逐漸變?yōu)?00px。Transition過渡舉例（transition）transition-property

屬性用于指定應(yīng)用過渡效果的CSS屬性的名稱?；菊Z法格式transition-property:none|all|property;屬性值描述none沒有屬性會獲得過渡效果。all所有屬性都將獲得過渡效果。property定義應(yīng)用過渡效果的CSS屬性名稱，多個名稱之間以逗號分隔。transition-property舉例(transition-property)transition-duration屬性用于定義過渡效果花費(fèi)的時間，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）?；菊Z法格式transition-duration:time;transition-duration舉例(transition-duration)transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認(rèn)值為“ease“。基本語法格式transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);舉例(transition-timing-function)transition-timing-functiontransition-timing-function屬性的取值屬性值描述linear指定以相同速度開始至結(jié)束的過渡效果，等同于cubic-bezier(0,0,1,1)）。ease指定以慢速開始，然后加快，最后慢慢結(jié)束的過渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。ease-in指定以慢速開始，然后逐漸加快（淡入效果）的過渡效果，等同于cubic-bezier(0.42,0,1,1）。ease-out指定以慢速結(jié)束（淡出效果）的過渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-in-out指定以慢速開始和結(jié)束的過渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，它們的值在0~1之間。transition-timing-functiontransition-delay屬性規(guī)定過渡效果何時開始，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）?；菊Z法格式transition-delay:time;正數(shù):過渡動作會延遲觸發(fā)。負(fù)數(shù)：過渡動作會從該時間點(diǎn)開始，之前的動作被截斷。transition-delaytransition屬性是一個復(fù)合屬性，用于在一個屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性?；菊Z法格式transition：propertydurationtiming-functiondelay;使用transition屬性設(shè)置多個過渡效果時，它的各個參數(shù)必須按照順序進(jìn)行定義，不能顛倒。

例如：transition:border-radius5sease-in-out2s;transition無論是單個屬性還是簡寫屬性，使用時都可以實(shí)現(xiàn)多個過渡效果。如果使用transition簡寫屬性設(shè)置多種過渡效果，需要為每個過渡屬性集中指定所有的值，并且使用逗號進(jìn)行分隔。transition隨堂練習(xí)（2）過渡舉例1舉例21、實(shí)現(xiàn)從左側(cè)圖片到右側(cè)圖片的過渡變化，過渡效果延時1s發(fā)生。2、上面例子只有一個過渡效果，如何同時有多個過渡效果應(yīng)該怎么處理呢？下面例子同時采用過渡效果改變width、height、opacity的樣式。動畫5.3Animation動畫@keyframes規(guī)定動畫。animation所有動畫屬性的簡寫屬性，除了animation-play-state屬性。animation-name規(guī)定@keyframes動畫的名稱。animation-duration規(guī)定動畫完成一個周期所花費(fèi)的秒或毫秒。animation相關(guān)的屬性CSS3的屬性中有若干能夠?qū)崿F(xiàn)動畫效果，通過設(shè)置其子屬性，可以創(chuàng)造如移動、淡入淡出、改變顏色的效果。其子屬性及功能描述如表所示：舉例Animation動畫animation-timing-function規(guī)定動畫的速度曲線。animation-delay規(guī)定動畫何時開始。animation-iteration-count規(guī)定動畫被播放的次數(shù)。animation-direction規(guī)定動畫是否在下一周期逆向地播放。animation-play-state規(guī)定動畫是否正在運(yùn)行或暫停。animation-fill-mode規(guī)定對象動畫時間之外的狀態(tài)。animation相關(guān)的屬性舉例屬性值描述animationname必需。定義動畫的名稱。keyframes-selector必需。動畫時長的百分比。合法的值：0-100%from（與0%相同）to（與100%相同）css-styles必需。一個或多個合法的CSS樣式屬性。@keyframes規(guī)則基本語法格式@keyframes

animationname{keyframes-selector{css-styles;}}舉例使div元素勻速向下移動：舉例（

animation-@keyframes-fromto，animation-@keyframes-%）div{animation:mymove5sinfinite;}@keyframesmymove{from{top:0px;}to{top:200px;}}@-moz-keyframesmymove/*Firefox*/{from{top:0px;}to{top:200px;}}@-webkit-keyframesmymove/*Safari和Chrome*/{from{top:0px;}to{top:200px;}}@-o-keyframesmymove/*Opera*/{from{top:0px;}to{top:200px;}}"from"和"to"等價于0%和100%。0%是動畫的開始時間，100%動畫的結(jié)束時間。@keyframes規(guī)則案例演示為@keyframes動畫規(guī)定名稱值描述keyframename規(guī)定需要綁定到選擇器的keyframe的名稱。none規(guī)定無動畫效果（可用于覆蓋來自級聯(lián)的動畫）。animation-name基本語法格式animation-name:keyframename|none;定義動畫完成一個周期所需要的時間，以秒或毫秒計(jì)。說明：必須明確規(guī)定animation-duration屬性，否則時長為0，就不會播放動畫。舉例（animation-duration）值描述time規(guī)定完成動畫所花費(fèi)的時間。默認(rèn)值是0，意味著沒有動畫效果。animation-duration基本語法格式animation-duration:time;animation-timing-function規(guī)定動畫的速度曲線。速度曲線定義動畫在每一動畫周期中執(zhí)行的節(jié)奏。速度曲線用于使變化更為平滑。舉例（

animation-timing-function）值描述linear動畫從頭到尾的速度是相同的。ease默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢。ease-in動畫以低速開始。ease-out動畫以低速結(jié)束。ease-in-out動畫以低速開始和結(jié)束。cubic-bezier(n,n,n,n)在cubic-bezier（貝塞爾曲線）函數(shù)中自己的值?？赡艿闹凳菑?到1的數(shù)值。animation-timing-function基本語法格式animation-timing-function:value;隨堂練習(xí)（3）動畫對比一下不同速度曲線的效果。演示示例：速度曲線animation-delay屬性定義動畫何時開始。舉例（

animation-delay）animation-delay:-2s;/*W3C和Opera*/-moz-animation-delay:-2s;/*Firefox*/-webkit-animation-delay:-2s;/*Safari和Chrome*/animation-delay允許負(fù)值，-2s使動畫馬上開始，但跳過前2秒進(jìn)入動畫?；菊Z法格式animation-delay:time;animation-iteration-count屬性定義動畫的播放次數(shù)值描述n定義動畫播放次數(shù)的數(shù)值。infinite規(guī)定動畫應(yīng)該無限次播放。animation-iteration-count基本語法格式animation-iteration-count:n|infinite;animation-direction屬性定義是否應(yīng)該輪流反向播放動畫。如果animation-direction值是"alternate"，則動畫會在奇數(shù)次數(shù)（1、3、5等等）正常播放，而在偶數(shù)次數(shù)（2、4、6等等）向后播放。注釋：如果把動畫設(shè)置為只播放一次，則該屬性沒有效果。舉例（

animation-direction）animation-direction基本語法格式animation-direction:normal|alternate;animation-play-state屬性定義動畫的狀態(tài)。舉例（

animation-play-state）Running表示運(yùn)動Paused表示暫停animation-play-state基本語法格式animation-play-state:running|paused;舉例（animation-fill-mode）animation-fill-mode屬性定義動畫結(jié)束后的狀態(tài)，none無forwards動畫結(jié)束（to里面的所有樣式）時的狀態(tài)backwards動畫開始（from里面的所有樣式）時的狀態(tài)both動畫開始或者結(jié)束時的狀態(tài)。animation-fill-mode基本語法格式animation-fill-mode:none|forwards|backwards|both;animation屬性是一個簡寫屬性，用于在一個屬性中設(shè)置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六個動畫屬性。注意：使用animation屬性時必須指定animation-name和animation-duration屬性，否則持續(xù)的時間為0，并且永遠(yuǎn)不會播放動畫。完成animation練習(xí)animation基本語法格式animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;隨堂練習(xí)（4）動畫實(shí)現(xiàn)動畫，方塊從左上角開始左→右→下→左，順時針方向移動。同時背景色不斷變化，red→yellow→blue→green→red。方向示意：→↑

↓←演示示例：動畫轉(zhuǎn)換5.4轉(zhuǎn)換（transform）屬性用于元素的2D或3D轉(zhuǎn)換，這個屬性允許用戶對元素進(jìn)行旋轉(zhuǎn)、縮放、平移、傾斜等。這些效果在CSS3之前都需要依賴Flash或JavaScript才能完成?，F(xiàn)在，使用純CSS3就可以實(shí)現(xiàn)這些變形效果，而無須加載額外的文件，這樣極大地提高了網(wǎng)頁開發(fā)者的工作效率，提高了頁面的執(zhí)行速度。轉(zhuǎn)換transform屬性允許對元素應(yīng)用2D轉(zhuǎn)換，常見2D轉(zhuǎn)換：2D轉(zhuǎn)換平移傾斜縮放旋轉(zhuǎn)transform屬性的默認(rèn)值為none，適用于內(nèi)聯(lián)元素和塊元素r，表示不進(jìn)行變形。transform：none|transform-functionstansform-functions用于設(shè)置變形函數(shù)，可以是一個或多個變形函數(shù)列表?；菊Z法格式2D轉(zhuǎn)換2D轉(zhuǎn)換函數(shù)名描述參數(shù)說明rotate(angel)旋轉(zhuǎn)元素angel是度數(shù)值，代表旋轉(zhuǎn)角度skew(x-angel,y-angel)傾斜元素angel是度數(shù)值，代表傾斜角度skewX(angel)沿著x軸傾斜元素skewY(angel)沿著y軸傾斜元素2D轉(zhuǎn)換的常用函數(shù)2D轉(zhuǎn)換函數(shù)名描述參數(shù)說明scale(x,y)縮放元素，改變元素的高度和寬度代表縮放比例，取值包括正數(shù)、負(fù)數(shù)和小數(shù)scaleX(x)改變元素的寬度scaleY(y)改變元素的高度2D轉(zhuǎn)換的常用函數(shù)2D轉(zhuǎn)換2D轉(zhuǎn)換的常用函數(shù)函數(shù)名描述參數(shù)說明translate(x,y)移動元素對象，基于x和y坐標(biāo)重新定位元素元素移動的數(shù)值，x代表左右方向，y代表上下方向，向左和向上使用負(fù)數(shù)，反之用正數(shù)translateX(x)沿著x軸移動元素translateY(y)沿著y軸移動元素matrix(n,n,n,n,n,n)2D轉(zhuǎn)換矩陣使用六個值的表示變形，所有變形的本質(zhì)都是由矩陣完成的舉例使用translate()函數(shù)能夠重新定義元素的坐標(biāo)，實(shí)現(xiàn)平移的效果。該函數(shù)包含兩個參數(shù)，分別用于定義X軸和Y軸的坐標(biāo)。x-value是元素在水平方向上向右移動的距離；y-value是元素在垂直方向上向下移動的距離。如果省略了第二個參數(shù)，則取默認(rèn)值0。當(dāng)值為負(fù)數(shù)時，表示反方向移動元素。平移基本語法格式transform:translate(x-value,y-value);

transform:translate(200px,100px);-ms-transform:translate(200px,100px);/*IE9*/-moz-transform:translate(200px,100px);/*Firefox*/-webkit-transform:translate(200px,100px);/*Safari和Chrome*/-o-transform:translate(200px,100px);/*Opera*/舉例平移舉例scale()函數(shù)用于縮放元素。該函數(shù)包含兩個參數(shù)，分別用來定義寬度和高度的縮放比例。x-axis和y-axis參數(shù)值可以是正數(shù)或負(fù)數(shù)。正數(shù)值表示基于指定的寬度和高度縮放元素；負(fù)數(shù)值是先翻轉(zhuǎn)元素，再縮放元素（如文字被翻轉(zhuǎn)）縮放基本語法格式transform:scale(x-axis,y-axis);transform:scale(0.9,-2);-ms-transform:scale(0.9,-2);/*IE9*/-moz-transform:scale(0.9,-2);/*Firefox*/-webkit-transform:scale(0.9,-2);/*Safari和Chrome*/-o-transform:scale(0.9,-2);/*Opera*/舉例縮放虛框是div的原始大小，利用scale()函數(shù)將div的長寬縮放為長0.9倍、寬2倍，-2實(shí)現(xiàn)div在Y軸翻轉(zhuǎn)，轉(zhuǎn)換為灰色的div。為了便于比較，設(shè)置灰色的div外邊距為100px。如圖所示，新的div變?yōu)閷挾?80px、高度200px的翻轉(zhuǎn)樣式舉例skew()函數(shù)能夠讓元素傾斜顯示。該函數(shù)包含兩個參數(shù)，分別用來定義X軸和Y軸坐標(biāo)傾斜的角度。skew()函數(shù)可以將一個對象圍繞著X軸和X軸按照一定的角度傾斜。參數(shù)x-angle表示相對于X軸傾斜的角度值；參數(shù)y-angle表示相對于Y軸傾斜的角度值。如果省略了第二個參數(shù)，則取默認(rèn)值0。傾斜基本語法格式transform:skew(x-angle,y-angle);舉例rotate()函數(shù)能夠旋轉(zhuǎn)指定的元素對象，主要在二維空間內(nèi)進(jìn)行操作參數(shù)angle表示要旋轉(zhuǎn)的角度值。如果角度為正數(shù)值，則按照順時針旋轉(zhuǎn)；否則，按照逆時針旋轉(zhuǎn)旋轉(zhuǎn)基本語法格式transform:rotate(angle);編程實(shí)現(xiàn)2D轉(zhuǎn)換