CSS3新功能第9章匯報人：***目錄CONTENTCSS3新屬性過渡CSS3的變形和動畫屬性本章導(dǎo)讀如同人類的進(jìn)化一樣，CSS3是

CSS2的“進(jìn)化”版本，在

CSS2基礎(chǔ)上，增強(qiáng)或新增了許多特性，彌補(bǔ)了

CSS2的眾多不足之處，使得

Web開發(fā)變得更為高效和便捷，如動畫、圓角、陰影、邊框圖片等。CSS3無疑對

Web前端開發(fā)帶來質(zhì)的飛躍。雖然目前CSS3還沒有完全普及，而且瀏覽器也不完全支持，但對于我們積極地去學(xué)習(xí)和實(shí)踐并不矛盾，掌握和學(xué)習(xí)

CSS3將是大勢所趨。CSS3將是引導(dǎo)我們進(jìn)入編寫網(wǎng)頁精彩世界的先驅(qū)技術(shù)，開發(fā)人員能夠更輕松地創(chuàng)建功能強(qiáng)大、易于維護(hù)的網(wǎng)站。隨著舊版瀏覽器所占市場份額逐漸減少，學(xué)習(xí)

CSS3技術(shù)將更有價值。這是作為一位優(yōu)秀網(wǎng)站開發(fā)人員所必須掌握的技術(shù)之一，本章將對

CSS3新功能進(jìn)行介紹。第一節(jié)PART.01CSS3新屬性9.1.1圓角邊框傳統(tǒng)的圓角生成方案，必須使用多張圖片作為背景圖案。CSS3的出現(xiàn)，使得我們無須花費(fèi)時間制作這些圖片，只需要設(shè)置圓角邊框（border-radius）屬性，其基本語法格式如下：border-radius:1-4length|%/1-4length|%;每個半徑的四個值的順序是：左上角，右上角，右下角，左下角（順時針）。水平半徑和垂直半徑及四個圓角位置如圖9-1所示。圖9-1圓角圖示9.1.1圓角邊框一般情況下，如果屬性值后面沒有“/”符號，表示水平半徑=垂直半徑，例如：border-radius：50px；與border-radius：50px/50px；設(shè)置效果是一樣的，表示水平半徑和垂直半徑都是50px。border-radius常用描述如下：border-radius:50px/*水平、垂直半徑都是50px*/border-radius:050px;/*左上角和右下角為0，左下角和右上角為50px*/border-radius:010px20px;/*左上角為0，右上角和左下角為10px，右下角為20px*/border-radius:10px20px30px40px;/*左上角，右上角，右下角，左下角，順指針方向*/9.1.2盒陰影盒陰影（box-shadow）屬性向邊框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由2～4個長度值、可選的顏色值，以及可選的

inset關(guān)鍵詞來規(guī)定，省略長度的值是0。其基本語法格式如下：box-shadow:h-shadowv-shadowblurspreadcolorinset;9.1.2盒陰影box-shadow屬性值見表9-1。表9-1box-shadow屬性值值描述h-shadow必需。水平陰影的位置，允許負(fù)值v-shadow必需。垂直陰影的位置，允許負(fù)值blur可選。模糊距離spread可選。陰影尺寸color可選。陰影的顏色。請參閱

CSS顏色值inset可選。將外部陰影（outset）改為內(nèi)部陰影9.1.3透明度透明度（opacity）用來設(shè)置元素的不透明度，其屬性值見表9-2。opacity屬性的語法格式如下：opacity：value|inherit;表9-2opacity屬性值值描述value規(guī)定不透明度。從0.0（完全透明）到1.0（完全不透明）inherit應(yīng)該從父元素繼承opacity屬性的值9.1.4RGBACSS3中的

RGBA就是在

RGB（紅色R+綠色G+藍(lán)色B）的基礎(chǔ)上加了一個通道

Alpha。RGBA不是

CSS屬性，而是引入

CSS3的一個新顏色模塊，當(dāng)設(shè)定一個

RGBA

色彩時，參數(shù)依次設(shè)定為紅、綠、藍(lán)的顏色值，可以是0～255或百分?jǐn)?shù)，Alpha透明值為0～1。第二節(jié)PART.02過渡通過過渡（transition）屬性，可以讓

Web前端開發(fā)人員不需要JavaScript就可以實(shí)現(xiàn)簡單的動畫交互效果。過渡屬性看似簡單，但實(shí)際上有很多需要注意的細(xì)節(jié)和容易混淆的地方。9.2.1CSS過渡簡介W3C（萬維網(wǎng)聯(lián)盟）允許

CSS的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在獲得焦點(diǎn)、單擊或?qū)υ刈龀鋈魏胃淖兊那闆r下觸發(fā)，并以平滑的動畫效果改變

CSS

的屬性值。在

CSS3里使用transition屬性可以實(shí)現(xiàn)過渡效果。transition屬性見表9-3。表9-3transition屬性屬性描述transition簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性transition-property規(guī)定應(yīng)用過渡的CSS屬性的名稱transition-duration定義過渡效果花費(fèi)的時間。默認(rèn)是0transition-timing-function規(guī)定過渡效果的時間曲線。默認(rèn)是"ease"transition-delay規(guī)定過渡效果何時開始。默認(rèn)是09.2.2CSS過渡語法transition屬性是一個簡寫屬性，用于設(shè)置四個過渡屬性，其語法格式如下：transition:propertydurationtiming-functiondelay;transition屬性及取值情況見表9-4。表9-4transition屬性及取值情況屬性屬性值描述transition-propertynone沒有屬性會獲得過渡效果all所有屬性都將獲得過渡效果property定義應(yīng)用過渡效果的CSS屬性名稱列表，列表以逗號分隔transition-durationtime規(guī)定完成過渡效果需要花費(fèi)的時間（以秒或毫秒計），默認(rèn)值是0，意味著不會有效果9.2.2CSS過渡語法屬性屬性值描述transition-timingfunctionlinear規(guī)定以相同速度開始至結(jié)束的過渡效果ease規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果ease-in規(guī)定以慢速開始的過渡效果ease-out規(guī)定以慢速結(jié)束的過渡效果ease-in-out規(guī)定以慢速開始和結(jié)束的過渡效果transition-delaytime規(guī)定在過渡效果開始之前需要等待的時間，以秒或毫秒計9.2.2CSS過渡語法1.過渡多個屬性假設(shè)我們想為前面的案例再添加一個文本顏色的過渡，該如何實(shí)現(xiàn)呢？可以通過使用多個過渡屬性，在各個屬性之間添加逗號分隔來實(shí)現(xiàn)，每個屬性都有自己的過渡效果。9.2.2CSS過渡語法2.過渡時間函數(shù)過渡時間函數(shù)（transition-timing-function）規(guī)定過渡效果的時間曲線，如圖9-7所示。圖9-7transition-timing-function屬性第三節(jié)PART.03CSS3的變形和動畫屬性CSS3在原來的基礎(chǔ)上增加了變形和動畫相關(guān)屬性，通過這些屬性，以前需要用

JavaScript才能實(shí)現(xiàn)的功能，現(xiàn)在可以輕松實(shí)現(xiàn)。CSS的變形功能可以對元素進(jìn)行位移、旋轉(zhuǎn)、縮放和傾斜4種幾何變換的操作，CSS

3的動畫功能則是和位移、旋轉(zhuǎn)、縮放和傾斜4種幾何變換操作相結(jié)合，從而產(chǎn)生平滑的動畫效果。9.3.1CSS3的變形屬性CSS3變形功能提供了兩個屬性，分別是

transform和

transform-origin。1.transformtransform屬性用于設(shè)置元素的變形，可以設(shè)置一個或者一個以上的變形函數(shù)。目前，transform有5種基本變形函數(shù)可以選擇，其基本語法格式如下：transform:rotate|scale|skew|translate|matrix;9.3.1CSS3的變形屬性（1）transform

：translate（x，y）。x①表示

X軸上移動位置，y表示

Y軸上移動位置，中間用逗號分隔，其中

y可以省略，表示垂直方向沒有位移。如果單方向位移可以直接使用

translateX（x）表示元素水平方向移動

x，translateY（y）表示元素垂直方向移動

y。①為與代碼一致，此處用正體表示，余同。9.3.1CSS3的變形屬性（1）transform

：translate（x，y）。例如：div1{transform:translate(100px,20px);}div2{transform:translateX(100px);}div3{transform:translateY(20px);}運(yùn)行效果如圖9-8所示。圖9-8translate位移圖示9.3.1CSS3的變形屬性（2）transform：rotate（<angle>）。該屬性使元素在二維平面上順時針或逆時針旋轉(zhuǎn)，rotate里面的單位是

deg，角度為正值時，順時針旋轉(zhuǎn)；角度為負(fù)值時，逆時針旋轉(zhuǎn)。默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)，如圖9-10所示。圖9-10rotate旋轉(zhuǎn)圖示9.3.1CSS3的變形屬性（3）transform：scale（x，y）。給元素添加這個屬性后就能控制它放大還是縮小。scale（x，y）使元素水平方向和垂直方向同時縮放（也就是

X軸和

Y軸同時縮放），scaleX（x）元素僅水平方向縮放（X軸縮放），scaleY（y）元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點(diǎn)和基數(shù)，其中心點(diǎn)就是元素的中心位置，縮放基數(shù)為1，如果其值大于1，元素就放大，反之其值小于1時，元素則縮小。如果第2個參數(shù)未提供，則取與第1個參數(shù)一樣的值。9.3.1CSS3的變形屬性（3）transform：scale（x，y）。例如：div1{transform:scale(2,1.5);}div2{transform:scaleX(2)；}div3{transform:scaleY(2);}效果如圖9-12所示。圖9-12scale縮放效果9.3.1CSS3的變形屬性（4）transform：skew（x，y）。該屬性使元素在水平和垂直方向同時扭曲（

X軸和

Y

軸同時按一定的角度值進(jìn)行扭曲變形）；skewX（x）僅使元素在水平方向扭曲變形（

X軸扭曲變形）；skewY（y）僅使元素在垂直方向扭曲變形（

Y軸扭曲變形），其語法格式如下：transform:skew(<angle>,<angle>)第一個參數(shù)對應(yīng)

X軸，第二個參數(shù)對應(yīng)

Y軸。如果第二個參數(shù)未提供，則值為0，也就是

Y軸方向無斜切。9.3.1CSS3的變形屬性（4）transform：skew（x，y）。例如：div1{transform:skew(30deg,10deg);}div2{transform:skewX(30deg);}div3{transform:skewY(10deg);}skew效果如圖9-14所示。圖9-14skew效果9.3.1CSS3的變形屬性（5）transform：matrix（a，b，c，d，x，y）。該屬性將所有

2D變形函數(shù)（位移、旋轉(zhuǎn)、縮放和傾斜）組合在一起。需要注意的是，如果我們同時對一個元素進(jìn)行

transform

的多種屬性操作，如

rotate、scale、translate三種，那么多個屬性之間需要用空格隔開，其格式如下：transform:rotate(45deg)translateY(30px)scale(0.5)skew(30deg,30deg);提示：操作順序會影響轉(zhuǎn)換的效果（先旋轉(zhuǎn)會改變坐標(biāo)軸方向）。當(dāng)同時有位移和其他屬性時，記得要將位移放到最前面。9.3.1CSS3的變形屬性CSS3變形功能提供了兩個屬性，分別是

transform和

transform-origin。2.transform-origintransform-origin表示元素旋轉(zhuǎn)中心點(diǎn)，默認(rèn)值為

50%50%。第一個值表示元素旋轉(zhuǎn)中心點(diǎn)的水平位置，它還可以賦值

left、right、center、長度、百分比；第二個值表示元素旋轉(zhuǎn)中心點(diǎn)的垂直位置，它還可以賦值

left、right、center、長度、百分比。9.3.2CSS3的

3D變形屬性9.3.1節(jié)提到的變形可以理解為

2D變形，當(dāng)然，CSS3也提供了3D變形。1.transformtransform屬性增加了3個變形函數(shù)：（1）rotateX

：表示元素沿著

X軸旋轉(zhuǎn)。（2）rotateY

：表示元素沿著

Y軸旋轉(zhuǎn)。（3）rotateZ

：表示元素沿著

Z軸旋轉(zhuǎn)。9.3.2CSS3的

3D變形屬性2.transform-styletransform-style用于設(shè)置嵌套的子元素在

3D空間的顯示效果，它可以設(shè)置兩個值：（1）flat

：子元素不保留其

3D位置，默認(rèn)值。（2）preserve-3d

：子元素保留其

3D位置。9.3.2CSS3的

3D變形屬性3.perspectiveperspective設(shè)置成透視效果，透視效果為近大遠(yuǎn)小，該屬性值用于設(shè)置

3D元素距離視圖的距離，單位為像素，已經(jīng)內(nèi)置，我們只需要寫具體的數(shù)值即可，默認(rèn)為0。當(dāng)為元素定義

perspective屬性時，其子元素會獲得透視效果，而不是元素本身。9.3.2CSS3的

3D變形屬性4.perspective-originperspective-origin設(shè)置

3D元素所基于的

X軸和

Y軸，改變

3D元素的底部位置，該屬性取值與

transform-origin相同，默認(rèn)值為50%50%。9.3.3CSS3的動畫屬性CSS3提供了強(qiáng)大的補(bǔ)間動畫支持：animation，它可以做到一系列變換（包括平移、縮放、旋轉(zhuǎn)、改變透明度等）。在實(shí)際開發(fā)中，因為瀏覽器的兼容性，有時還需要加上

-moz-、-webkit-、-o-等前綴。動畫涉及的屬性見表9-5。9.3.3CSS3的動畫屬性屬性含義屬性值@keyframes定義動畫選擇器name時間CSS樣式animation-name使用@keyframes定義的動畫none/動畫選擇器定義的名字animation-delay設(shè)置動畫的延遲時間timeanimation-duration設(shè)置動畫的持續(xù)時間timeanimation-timing-function設(shè)置動畫的時間曲線linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier（n，n，n，n）animation-iteration-count設(shè)置動畫的播放次數(shù)數(shù)字/infiniteanimation-direction設(shè)置動畫反向播放normal/alternateanimation-play-state設(shè)置動畫播放狀態(tài)paused/runninganimation一條聲明設(shè)置所有動畫屬性animation-nameanimation-delayanimation-durationanimation-timing-functionanimation-iteration-countanimation-directionanimation-play-state表9-5動畫屬性9.3.3CSS3的動畫屬性通過

@keyframes規(guī)則可以創(chuàng)建動畫。以百分比規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞“from”和“to”定義，等價于0和100%，0是動畫開始的時間，100%是動畫結(jié)束的時間。animation-name的屬性值為

@keyframes動畫規(guī)定的名稱，表示使用

@keyframes預(yù)先定義的動畫，如果賦值為

none，表示無動畫效果。animation-d