第11章CSS3技術(shù)主講人：XX老師本章學(xué)習(xí)目標(biāo)掌握CSS3邊框和背景效果的應(yīng)用；掌握CSS3文本和字體效果的應(yīng)用；掌握CSS3變形與動(dòng)畫效果的應(yīng)用；掌握CSS3多列效果的應(yīng)用。目錄11.1CSS3邊框和背景效果11.2CSS3文本和字體效果11.3CSS3變形與動(dòng)畫效果11.4CSS3多列11.1.1CSS3邊框11.1.2CSS3背景效果11.1CSS3邊框和背景效果11.1.1CSS3邊框CSS3新增了三種邊框效果，分別是：圓角邊框：自定義圓角數(shù)量和弧度的邊框矩形陰影：帶陰影效果的邊框圖片邊框：用自定義圖片素材做邊框11.1.1CSS3邊框表11-1CSS3新增邊框效果屬性一覽屬性名稱解釋border-radius為元素設(shè)置圓角邊框。box-shadow為元素設(shè)置帶陰影效果的邊框。border-image為元素設(shè)置帶有背景圖片的邊框。11.1.1CSS3邊框1CSS3圓角邊框在CSS3中，border-radius屬性可用于直接創(chuàng)建帶有圓角的邊框樣式，該屬性值表示圓角邊框的圓角半徑長度，數(shù)值越大則圓的弧度越明顯。其語法格式如下：border-radius屬性的取值有以下兩種形式：<length>：使用長度值規(guī)定圓角半徑的長度，該值不可為負(fù)數(shù)。<percentage>：使用百分比規(guī)定圓角半徑的長度，該值不可為負(fù)數(shù)。border-radius:<length>|<percentage>;11.1.1CSS3邊框1CSS3圓角邊框例如，為段落元素p設(shè)置圓角邊框，其中圓角半徑為20像素：p{border-radius:20px}11.1.1CSS3邊框1CSS3圓角邊框主流瀏覽器對(duì)CSS3中的border-radius屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本5.0及以上版本5.0及以上版本10.5及以上版本11.1.1CSS3邊框1CSS3圓角邊框注：部分主流瀏覽器在支持CSS3標(biāo)準(zhǔn)的border-radius屬性寫法之前使用特定的前綴實(shí)現(xiàn)此功能，具體情況如下：Firefox：2.0-12.0版本支持使用-moz-前綴，寫成-moz-border-radius。Chrome：4.0-43.0版本支持使用-webkit-前綴，寫成-webkit-border-radius。Safari：3.1-8.1版本支持使用-webkit-前綴，寫成-webkit-border-radius。Opera：10.5-28.0版本支持使用-webkit-前綴，寫成-webkit-border-radius。11.1.1CSS3邊框1CSS3圓角邊框CSS3圓角邊框?qū)傩灾狄挥[表屬性值解釋border-radius用于定義邊框四個(gè)角的弧度border-top-left-radius用于定義邊框左上角的弧度border-top-right-radius用于定義邊框右上角的弧度border-bottom-left-radius用于定義邊框左下角的弧度border-bottom-right-radius用于定義邊框右下角的弧度以上4種border-*-radius屬性均與border-radius屬性取值方式相同，可以使用長度值或百分比的形式表示。11.1.1CSS3邊框1CSS3圓角邊框【例11-1】CSS3圓角邊框效果11.1.1CSS3邊框2CSS3矩形陰影在CSS3中，box-shadow屬性可以為邊框添加陰影，該屬性適用于所有元素。box-shadow的默認(rèn)屬性值為none，表示無陰影效果。其語法格式如下：

參數(shù)解釋如下：xoffset：表示陰影在水平方向（x軸）上的偏移距離，取值為CSS長度值<length>。yoffset：表示陰影在垂直方向（y軸）上的偏移距離，取值為CSS長度值<length>。width：表示陰影的寬度，取值為CSS長度值<length>。color：表示陰影的顏色效果，取值為CSS顏色值<color>。box-shadow:xoffsetyoffsetwidthcolor11.1.1CSS3邊框2CSS3矩形陰影例如，為矩形添加一個(gè)15px寬的灰色陰影，映射在右下角。div{

box-shadow:10px10px15pxgray}11.1.1CSS3邊框2CSS3矩形陰影主流瀏覽器對(duì)CSS3中的box-shadow屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本10.0及以上版本5.1及以上版本10.5及以上版本11.1.1CSS3邊框2CSS3矩形陰影注：部分主流瀏覽器在統(tǒng)一支持CSS3的box-shadow屬性之前使用特定的前綴實(shí)現(xiàn)此功能，具體情況如下：Firefox：4.0-12.0版本支持使用-moz-前綴，寫成-moz-box-shadow。Chrome：4.0-43.0版本支持使用-webkit-前綴，寫成-webkit-box-shadow。Safari：3.1-8.1版本支持使用-webkit-前綴，寫成-webkit-box-shadow。Opera：10.5-28.0版本支持使用-webkit-前綴，寫成-webkit-box-shadow。11.1.1CSS3邊框2CSS3矩形陰影【例11-2】CSS3矩形陰影效果

11.1.1CSS3邊框3CSS3圖像邊框在CSS3中，border-image屬性可以元素添加自定義圖像效果的邊框，該屬性適用于所有元素。主流瀏覽器對(duì)CSS3中的border-image屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況11.0及以上版本15.0及以上版本16.0及以上版本6.0及以上版本15.0及以上版本11.1.1CSS3邊框3CSS3圖像邊框

注：部分主流瀏覽器在支持CSS3標(biāo)準(zhǔn)的border-image屬性寫法之前使用特定的前綴實(shí)現(xiàn)此功能，具體情況如下：Firefox：3.5-14.0版本支持使用-moz-前綴，寫成-moz-border-image。Chrome：4.0-15.0版本支持使用-webkit-前綴，寫成-webkit-border-image。Safari：3.1-5.1版本支持使用-webkit-前綴，寫成-webkit-border-image。11.1.1CSS3邊框3CSS3圖像邊框CSS3圖片邊框?qū)傩砸挥[表屬性名稱解釋border-image-source用于設(shè)置或獲取元素邊框的圖像來源路徑。其默認(rèn)值為none，表示無背景圖片。border-image-slice用于設(shè)置或獲取邊框圖片的分割方式。border-image-width用于設(shè)置或獲取邊框厚度。border-image-outset用于設(shè)置或獲取邊框背景圖超出邊框的量。border-image-repeat用于設(shè)置或獲取邊框圖片的平鋪狀態(tài)。其默認(rèn)值為stretch。border-image復(fù)合屬性，用于定義邊框圖片的全部設(shè)置。11.1.1CSS3邊框3CSS3圖像邊框border-image-slice屬性有三種取值，解釋如下：<number>：使用數(shù)值規(guī)定寬度，允許是整數(shù)或浮點(diǎn)數(shù)，不可以是負(fù)數(shù)。<percentage>：使用百分比規(guī)定寬度，不可以是負(fù)值。fill：保留剪裁后的區(qū)域，這塊區(qū)域的平鋪方式依據(jù)border-image-repeat的規(guī)定。注：border-image-slice屬性的默認(rèn)值為100%。11.1.1CSS3邊框3CSS3圖像邊框border-image-repeat屬性有三種取值，解釋如下：repeat：定義用重復(fù)平鋪的方式填充邊框背景圖。如果圖片碰到邊框的邊界超過部分將被截?cái)?。round：定義用重復(fù)平鋪的方式填充邊框背景圖。圖片會(huì)根據(jù)邊框尺寸動(dòng)態(tài)調(diào)整圖片大小，直至正好可以鋪滿整個(gè)邊框。stretch：定義用拉伸圖片的方式填充邊框背景圖。該屬性值為默認(rèn)值。注：事實(shí)上border-image-repeat屬性在標(biāo)準(zhǔn)中還有一個(gè)取值為space，由于目前所有的主流瀏覽器均不支持該屬性，因此沒有列入表中。11.1.1CSS3邊框3CSS3圖像邊框border-image是一種簡寫形式，用于一次性定義若干種border-image-*屬性。其聲明常用順序如下（省略border-image-前綴）：[source][slice][width][outset][repeat]border-image屬性的默認(rèn)值為none100%10stretch，如果其中部分屬性省略不寫，則取其對(duì)應(yīng)的默認(rèn)值。11.1.1CSS3邊框3CSS3圖像邊框如果同時(shí)設(shè)置了border-style與border-image屬性，瀏覽器會(huì)優(yōu)先顯示border-image規(guī)定的樣式效果。當(dāng)border-image屬性值為none或者指定的圖像不可見時(shí)將會(huì)顯示border-style所定義的邊框樣式。11.1.1CSS3邊框3CSS3圖像邊框例如，為段落元素p同時(shí)設(shè)置普通邊框樣式與圖片邊框樣式：p{border:2pxsolidred;border-image:url(image/test.jpg)10;}上述代碼同時(shí)定義了border屬性與border-image屬性，如果border-image中指定的圖片不可見或尚未被加載，則以border屬性規(guī)定的樣式顯示；如果圖片加載成功，則只顯示border-image規(guī)定的邊框樣式。11.1.1CSS3邊框3CSS3圖像邊框【例11-3】CSS3圖像邊框效果

11.1.2CSS3背景效果CSS3新增了三種背景效果，可用于自定義背景圖片或顏色的繪制區(qū)域、位置和尺寸。屬性名稱解釋background-clip自定義背景圖片的繪制區(qū)域。background-origin自定義背景圖片的位置。background-size自定義背景圖片的尺寸。CSS3新增背景效果屬性一覽11.1.2CSS3背景效果1自定義背景圖片繪制區(qū)域在CSS3中，background-clip屬性可用于剪裁元素的背景圖片或顏色區(qū)域，使其只顯示指定的區(qū)域內(nèi)容。其語法格式如下：background-clip:border-box|padding-box|content-box|text;11.1.2CSS3背景效果background-clip:border-box|padding-box|content-box|text;background-clip屬性的取值有以下4種形式：padding-box：只保留元素內(nèi)邊距之內(nèi)的背景區(qū)域，包括內(nèi)邊距本身。border-box：只保留元素邊框之內(nèi)的背景區(qū)域，包括邊框本身。content-box：只保留元素內(nèi)容區(qū)域的背景。該屬性值是默認(rèn)值。text：只保留前景內(nèi)容（例如文字）的形狀，其他區(qū)域的背景圖像均去掉。該取值必須將屬性名稱寫成-webkit-background-clip方可使用。1自定義背景圖片繪制區(qū)域11.1.2CSS3背景效果1自定義背景圖片繪制區(qū)域

注：部分主流瀏覽器在完全支持background-clip屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-background-clip。其中2.0-38.0版本不支持text屬性值。主流瀏覽器對(duì)CSS3中的background-clip屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本11.1.2CSS3背景效果1自定義背景圖片繪制區(qū)域【例11-4】CSS3background-clip屬性的應(yīng)用11.1.2CSS3背景效果2自定義背景圖片位置在CSS3中，background-origin屬性可用于剪裁元素的背景圖片，使其只顯示指定的區(qū)域內(nèi)容。該屬性必須與background-image屬性配合使用，否則沒有圖片來源則無法對(duì)背景圖片進(jìn)行定位。11.1.2CSS3背景效果2自定義背景圖片位置background-origin屬性的語法格式如下：background-origin:border-box|padding-box|content-box;background-origin屬性的參數(shù)表示背景圖片的位置，有以下3種取值：padding-box：從元素內(nèi)邊距開始顯示背景圖像，該屬性值是默認(rèn)值。border-box：從元素邊框開始顯示背景圖像。content-box：從元素內(nèi)容區(qū)域開始顯示背景圖像。11.1.2CSS3背景效果2自定義背景圖片位置瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本主流瀏覽器對(duì)CSS3中的background-origin屬性支持情況一覽11.1.2CSS3背景效果2自定義背景圖片位置【例11-5】CSS3background-origin屬性的應(yīng)用

11.1.2CSS3背景效果3自定義背景圖片尺寸在CSS3中，background-size屬性可用于定義元素背景圖片的尺寸大小。其語法格式如下：background-size:<bg-size>[,<bg-size>];11.1.2CSS3背景效果3自定義背景圖片尺寸background-size屬性的格式解釋如下：background-size的<bg-size>參數(shù)表示背景圖片的位置，有以下5種取值：<length>：使用長度值規(guī)定背景圖像的大小，該值不可為負(fù)數(shù)。<percentage>：使用百分比規(guī)定背景圖像的大小，該值不可為負(fù)數(shù)。auto：背景圖像的真實(shí)大小。cover：將背景圖像等比例縮放到完全覆蓋容器。由于圖像有可能與容器比例不一致導(dǎo)致部分背景圖像超出容器范圍。contain：將背景圖像等比例縮放到寬度或高度與容器保持一致。背景圖像始終在容器中，不會(huì)超出容器的范圍。11.1.1CSS3邊框3自定義背景圖片尺寸如果只有單個(gè)參數(shù)則用于表示寬度的樣式，高度默認(rèn)為跟隨寬度等比例縮放。例如：p{background-size:200px;}上述代碼表示將段落元素<p>的背景圖片寬度縮放為200像素，高度會(huì)隨著寬度等比例縮放。11.1.1CSS3邊框3自定義背景圖片尺寸如果有2個(gè)參數(shù)則第一個(gè)參數(shù)表示寬度，第二個(gè)參數(shù)表示高度。例如：p{background-size:200px300px;}上述代碼表示將段落元素<p>的背景圖片寬度縮放為200像素、高度縮放為300像素。11.1.2CSS3背景效果3自定義背景圖片尺寸主流瀏覽器對(duì)CSS3中的background-size屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本15.0及以上版本7.0及以上版本15.0及以上版本注：部分主流瀏覽器在完全支持background-size屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-background-size。Chrome：4.0-14.0版本支持使用background-size，但不可縮寫到background屬性中。Safari：6.0-6.1版本支持使用background-size，但不可縮寫到background屬性中。11.1.2CSS3背景效果3自定義背景圖片尺寸【例11-6】CSS3自定義背景圖像尺寸效果

11.2.1CSS3文本11.2.2CSS3字體11.2CSS3文本和字體效果11.2.1CSS3文本CSS3新增了兩種文本效果，分別是為文本添加陰影效果和長單詞強(qiáng)制換行效果。具體屬性名稱如表所示。CSS3新增文本效果屬性一覽屬性名稱解釋text-shadow用于為指定的文本添加陰影效果。word-wrap用于實(shí)現(xiàn)長單詞強(qiáng)制換行效果。11.2.1CSS3文本1CSS3文本陰影CSS3使用text-shadow屬性為指定文本添加陰影效果。其基本格式如下：text-shadow:xoffsetyoffsetwidthcolor11.2.1CSS3文本1CSS3文本陰影參數(shù)解釋如下：xoffset：指的是陰影距離原文字內(nèi)容在橫向上的偏移距離。取值為CSS長度值<length>，可以為負(fù)值。yoffset：指的是陰影距離原文字內(nèi)容在縱向上的偏移距離。取值為CSS長度值<length>，可以為負(fù)值。width：表示陰影的模糊半徑，半徑越大陰影面積越大，顯示效果越模糊，該值如果缺省則陰影和正文的面積大小完全一樣。取值為CSS長度值<length>，不能為負(fù)值。color：表示陰影的顏色效果，取值為CSS顏色值<color>。該值如果缺省在Chrome瀏覽器中不會(huì)顯示陰影，而在Firefox和Opera瀏覽器中將直接使用字體顏色作為陰影顏色。注：text-shadow的默認(rèn)屬性值為none，表示無陰影效果。11.2.1CSS3文本1CSS3文本陰影例如：h3{text-shadow:5px5pxred}指的是在目標(biāo)文本內(nèi)容右邊5px和下面5px的地方渲染紅色陰影。11.2.1CSS3文本1CSS3文本陰影主流瀏覽器對(duì)CSS3中的text-shadow屬性支持情況如表所示。主流瀏覽器對(duì)CSS3中的text-shadow屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本

注：部分主流瀏覽器在完全支持text-shadow屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-text-shadow。其中2.0-38.0版本不支持text屬性值。11.2.1CSS3文本1CSS3文本陰影【例11-7】CSS3文本陰影簡單效果

11.2.1CSS3文本1CSS3文本陰影【例11-8】CSS3文本陰影特殊效果

（文字發(fā)光、凹凸紋理、文字描邊等效果）

11.2.1CSS3文本2CSS3文字換行CSS3使用word-wrap屬性規(guī)定文本的換行規(guī)則，可以將長單詞斷開換到下一行繼續(xù)顯示。其語法格式如下：word-wrap:normal|break-word;word-wrap屬性的取值有以下兩種形式：normal：指的是只允許在斷字點(diǎn)換行，如果單詞較長則直接溢出邊界不會(huì)自動(dòng)換行。該屬性值為默認(rèn)值。break-word：指的是文本內(nèi)容允許在邊界內(nèi)換行，如果單詞較長將在內(nèi)部斷開換行。注：word-wrap的默認(rèn)屬性值為none，表示無陰影效果。11.2.1CSS3文本2CSS3文字換行例如：p{word-wrap:break-word;}上述代碼表示段落元素<p>中的文字內(nèi)容強(qiáng)制在元素邊界處換行。11.2.1CSS3文本2CSS3文字換行主流瀏覽器對(duì)CSS3中的text-shadow屬性支持情況如表所示。主流瀏覽器對(duì)CSS3中的text-shadow屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本

注：部分主流瀏覽器在完全支持text-shadow屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-text-shadow。其中2.0-38.0版本不支持text屬性值。11.2.1CSS3文本2CSS3文字換行【例11-9】CSS3文本強(qiáng)制換行效果11.2.2CSS3字體在CSS3之前，瀏覽器只能顯示設(shè)備上已安裝的字體。目前在CSS3中，通過@font-face的規(guī)則，網(wǎng)頁可以顯示任何字體。當(dāng)有特殊字體時(shí)，可以將其放在服務(wù)器端，在瀏覽頁面時(shí)會(huì)被自動(dòng)下載到用戶的設(shè)備終端。11.2.2CSS3字體其語法規(guī)則如下：@font-face{font-family:<identifier>;src:<url>[format(<string>)]}11.2.2CSS3字體例如：@font-face{font-family:'diyfont';src:url('diyfont.ttf')format('truetype')}其中font-family的名稱可以自定義，然后在CSS樣式聲明font屬性時(shí)使用該名稱即可。p{font-family:'diyfont';}11.2.2CSS3字體瀏覽器對(duì)@font-face的支持情況瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本

注：部分主流瀏覽器在完全支持text-shadow屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-text-shadow。其中2.0-38.0版本不支持text屬性值。11.2.2CSS3字體目前各類瀏覽器中的常用字體格式有如下四種：TrueType(.ttf)：中文稱為“全真”字體，該字體由微軟與蘋果公司聯(lián)合提出，使用數(shù)學(xué)函數(shù)定義字體輪廓，因此也被稱為輪廓字體。；WebOpenFontFormat(.woff)：中文稱為“開放字體格式”，該字體不包含加密內(nèi)容，目前由W3C組織的Web字體工作組進(jìn)行標(biāo)準(zhǔn)化；EmbeddedOpenType(.eot)：這是一種壓縮字庫，可以解決網(wǎng)頁中加載特殊字體的問題。該字體目前只有IE瀏覽器（微軟已于2023年2月14日正式禁用）可以支持；SVG(.svg)：SVG的全稱是ScalableVectorGraphics（可縮放矢量圖），它使用二維矢量圖來顯示字體，也是由W3C制定的一種開放標(biāo)準(zhǔn)。11.2.2CSS3字體【例11-10】CSS3自定義字體效果字體來源于本地font文件夾中的litte.ttf文件。11.3.1CSS32D變形11.3.2CSS3

Transition動(dòng)畫11.3.3CSS3Animation動(dòng)畫11.3CSS3變形與動(dòng)畫效果11.3.1CSS32D變形CSS3中的transform屬性用于元素變形，它能夠?qū)崿F(xiàn)對(duì)元素進(jìn)行移動(dòng)、收縮、旋轉(zhuǎn)等2D動(dòng)畫效果。11.3.1CSS32D變形主流瀏覽器對(duì)transform屬性的2D效果支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況10.0及以上版本16.0及以上版本36.0及以上版本9.0及以上版本23.0及以上版本補(bǔ)充說明如下：Firefox：3.5-15.0版本支持使用前綴-moz-，寫成-moz-transform的形式。Chrome：4.0-35.0版本支持使用前綴-webkit-，寫成-webkit-transform的形式。Safari：6.0-8.0版本支持使用前綴-webkit-，寫成-webkit-transform的形式。Opera：15.0-22.0版本支持使用前綴-webkit-，寫成-webkit-transform的形式。11.3.1CSS32D變形transform屬性有如下5種方法，具體可以查看表。方法名稱解釋translate(x,y)元素移動(dòng)到指定位置。例如translate(10px,20px)表示元素從左側(cè)往右移動(dòng)10像素，從頂部往下移動(dòng)20像素。rotate(degree)元素順時(shí)針旋轉(zhuǎn)指定的角度，填入負(fù)數(shù)則逆時(shí)針旋轉(zhuǎn)。例如rotate(30deg)表示順時(shí)針旋轉(zhuǎn)30度。scale(x,y)元素尺寸縮放指定的倍數(shù)。例如scale(2,3)表示寬度放大為原始尺寸的2倍，高度放大為原先的3倍。skew(xdeg,ydeg)圍繞x軸和y軸將元素翻轉(zhuǎn)指定的角度。例如skew(20deg,10deg)指的是將元素橫向傾斜20度，縱向傾斜10度。matrix(m11,m12,m21,m22,dx,dy)該方法包含了矩陣變換數(shù)學(xué)函數(shù)，根據(jù)填入的數(shù)據(jù)不同可以做到元素的移動(dòng)、旋轉(zhuǎn)、縮放和傾斜。可以用該方法完成更為復(fù)雜的變形。transform屬性方法一覽表11.3.1CSS32D變形1移動(dòng)translate()CSS3transform屬性的translate()方法可用于在頁面上平移元素，包括水平方向與垂直方向均可指定偏移量。其語法格式如下：transform:translate(x[,y]);其中參數(shù)x表示水平方向x軸上的移動(dòng)距離，參數(shù)y表示垂直方向y軸上的移動(dòng)距離。如果省略參數(shù)y，則默認(rèn)y軸上的移動(dòng)距離為0。11.3.1CSS32D變形1移動(dòng)translate()例如：p{transform:translate(10px,20px);}上述代碼表示段落元素<p>從初始位置往右移動(dòng)10像素、往下移動(dòng)20像素。11.3.1CSS32D變形1移動(dòng)translate()也可以單獨(dú)使用translateX()或translateY()方法指定水平或垂直其中一個(gè)方向上的移動(dòng)距離。語法格式如下：例如：transform:translateX(x);p{transform:translateX(10px);}上述代碼表示元素從左側(cè)往右移動(dòng)10像素。11.3.1CSS32D變形1移動(dòng)translate()【例11-11】CSS32D移動(dòng)效果11.3.1CSS32D變形2旋轉(zhuǎn)rotate()CSS3transform屬性的rotate()方法可用于在頁面上旋轉(zhuǎn)元素。其語法格式如下：transform:rotate(<angle>);參數(shù)<angle>表示元素順時(shí)針旋轉(zhuǎn)指定的角度，屬性值為CSS角度值。11.3.1CSS32D變形2旋轉(zhuǎn)rotate()例如：p{transform:rotate(30deg);}上述代碼表示段落元素<p>從初始位置順時(shí)針旋轉(zhuǎn)30度。11.3.1CSS32D變形2旋轉(zhuǎn)rotate()【例11-12】CSS32D旋轉(zhuǎn)效果11.3.1CSS32D變形3縮放scale()CSS3transform屬性的scale()方法可用于在頁面上放大或縮小元素。其語法格式如下：transform:scale(x[,y]);其中參數(shù)x表示水平方向x軸上的縮放倍數(shù)，參數(shù)y表示垂直方向y軸上的縮放倍數(shù)。如果省略參數(shù)y，則默認(rèn)y軸上的縮放倍數(shù)與x軸相同。屬性取值為CSSS數(shù)值<number>，允許是整數(shù)或者浮點(diǎn)數(shù)，其中取值為1表示原始尺寸沒有進(jìn)行縮放。11.3.1CSS32D變形3縮放scale()例如：p{transform:scale(2,3);}上述代碼表示段落元素<p>寬度放大為原始尺寸的2倍，高度放大為原先的3倍。11.3.1CSS32D變形3縮放scale()也可以單獨(dú)使用scaleX()或scaleY()方法指定水平或垂直其中一個(gè)方向上的縮放倍數(shù)。指定元素水平方向縮放的語法格式如下：指定元素垂直方向縮放的語法格式如下：transform:scaleX(x);transform:scaleY(y);11.3.1CSS32D變形3縮放scale()【例11-13】CSS32D縮放效果11.3.1CSS32D變形4翻轉(zhuǎn)skew()CSS3transform屬性的skew()方法可用于在頁面上翻轉(zhuǎn)元素。其語法格式如下：transform:skew(<angleX>[,<angleY>]);其中第一個(gè)參數(shù)<angleX>表示水平方向x軸上的傾斜扭曲角度，第二個(gè)參數(shù)<angleY>表示水平方向y軸上的傾斜扭曲角度。如果省略參數(shù)y，則默認(rèn)值為0。屬性取值為CSSS角度值<angle>。11.3.1CSS32D變形4翻轉(zhuǎn)skew()例如：p{transform:skew(20deg,10deg);}上述代碼表示將段落元素<p>橫向傾斜20度，縱向傾斜10度。11.3.1CSS32D變形4翻轉(zhuǎn)skew()也可以單獨(dú)使用skewX()或skewY()方法指定水平或垂直其中一個(gè)方向上的翻轉(zhuǎn)情況。指定元素水平方向x軸翻轉(zhuǎn)的語法格式如下：指定元素垂直方向y軸翻轉(zhuǎn)的語法格式如下：transform:skewX(<angle>);transform:skewY(<angle>);11.3.1CSS32D變形4翻轉(zhuǎn)skew()【例11-14】CSS32D翻轉(zhuǎn)效果11.3.1CSS32D變形5矩陣變換matrix()CSS3transform屬性的matrix()方法是以矩陣變換的數(shù)學(xué)函數(shù)實(shí)現(xiàn)元素的變形效果。其語法格式如下：transform:matrix(m11,m12,m21,m22,dx,dy);其中(m11,m12,m21,m22)表示矩陣，元素變換前的坐標(biāo)點(diǎn)(x,y)與矩陣相乘換算后得到新的坐標(biāo)點(diǎn)，最后分別加上參數(shù)dx和dy的偏移量得到最終坐標(biāo)結(jié)果。11.3.1CSS32D變形5矩陣變換matrix()CSS3transform屬性的matrix()方法是以矩陣變換的數(shù)學(xué)函數(shù)實(shí)現(xiàn)元素的變形效果。其語法格式如下：transform:matrix(m11,m12,m21,m22,dx,dy);其中(m11,m12,m21,m22)表示矩陣，元素變換前的坐標(biāo)點(diǎn)(x,y)與矩陣相乘換算后得到新的坐標(biāo)點(diǎn)，最后分別加上參數(shù)dx和dy的偏移量得到最終坐標(biāo)結(jié)果。11.3.1CSS32D變形5矩陣變換matrix()【例11-15】CSS32D矩陣變形效果

由于matrix()變形的函數(shù)轉(zhuǎn)換比較復(fù)雜，假如只需進(jìn)行基本變形，可以直接使用translate()、rotate()、scale()或skew()方法實(shí)現(xiàn)。11.3.2CSS3

Transition動(dòng)畫CSS3中的Transition動(dòng)畫又稱為過渡動(dòng)畫，在指定時(shí)間內(nèi)可以將元素從原始樣式逐漸變化為新的樣式。通?？捎糜谑髽?biāo)懸停在元素上發(fā)生動(dòng)畫事件。11.3.2CSS3

Transition動(dòng)畫transition動(dòng)畫包含5種屬性，具體可以查看下表。屬性名稱解釋transition-property用于指定對(duì)何種CSS屬性進(jìn)行漸變處理。例如可以指定元素的背景顏色background-color、寬度width、高度height等。transition-duration用于指定transition動(dòng)畫的持續(xù)時(shí)間，例如5秒寫為5s。transition-timing-function用于指定transition動(dòng)畫的漸變速度。缺省值為ease。transition-delay用于指定transition動(dòng)畫的延遲時(shí)間，缺省值為0s。transition復(fù)合屬性，用于一次性設(shè)置4種屬性效果。11.3.2CSS3

Transition動(dòng)畫1.漸變屬性transition-property在CSS3中transition-property屬性用于指定需要發(fā)生漸變的CSS屬性名稱，其語法格式如下：transition-property:none|all|property;transition-property屬性的取值有以下3種形式：none：沒有任何屬性獲得漸變效果。all：所有屬性都獲得漸變效果。property：設(shè)置漸變效果的CSS屬性名稱。如果是多個(gè)屬性則以列表的形式出現(xiàn)，中間用逗號(hào)隔開。11.3.2CSS3

Transition動(dòng)畫1.漸變屬性transition-property例如，為段落元素p指定需要產(chǎn)生漸變效果的CSS屬性名稱：p{transition-property:width,height;}上述代碼表示同時(shí)設(shè)置元素的寬度和高度發(fā)生漸變效果。11.3.2CSS3

Transition動(dòng)畫1.漸變屬性transition-property如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：：p{transition-property:width,height;/*兼容舊版Firefox*/-moz-transition-property:width,height;/*兼容舊版SafariandChrome*/-webkit-transition-property:width,height;}該屬性通常需要與tranisition-duration屬性配合使用，否則時(shí)長為0看不出漸變效果。11.3.2CSS3

Transition動(dòng)畫1.漸變屬性transition-property漸變屬性transition-property支持的常見CSS屬性參考如下：顏色值：背景顏色background-color、字體顏色color、邊框顏色border-color等。長度或百分比：寬度width、高度height、外邊距margin、內(nèi)邊距padding等。數(shù)值：透明度opacity、字號(hào)font-size、字體粗細(xì)font-weight等。11.3.2CSS3

Transition動(dòng)畫2.漸變持續(xù)時(shí)間transition-duration在CSS3中transition-duration屬性用于指定漸變動(dòng)畫效果的持續(xù)時(shí)長，持續(xù)時(shí)間越長漸變效果越慢。其語法格式如下：transition-duration:<time>;該屬性值單位為秒或者毫秒。其缺省狀態(tài)為0s，元素會(huì)瞬間從原始狀態(tài)變成最終狀態(tài)，無法顯示動(dòng)畫漸變過程，因此不建議省略transition-duration屬性的設(shè)置。11.3.2CSS3

Transition動(dòng)畫2.漸變持續(xù)時(shí)間transition-duration例如，為段落元素p指定漸變持續(xù)時(shí)間為10秒：p{transition-duration:10s;}11.3.2CSS3

Transition動(dòng)畫2.漸變持續(xù)時(shí)間transition-duration如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{transition-duration:10s;/*兼容舊版Firefox*/-moz-transition-duration:10s;/*兼容舊版SafariandChrome*/-webkit-transition-duration:10s;}11.3.2CSS3

Transition動(dòng)畫2.漸變持續(xù)時(shí)間transition-duration【例11-16】CSS3設(shè)置漸變動(dòng)畫持續(xù)時(shí)間

11.3.2CSS3

Transition動(dòng)畫3.漸變速率函數(shù)transition-timing-function在CSS3中transition-timing-function用于設(shè)置漸變速率函數(shù)。其語法格式如下：transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier;transition-timing-function屬性的取值常見以下6種形式：linear：勻速。該值等同于貝塞爾曲線(0.0,0.0,1.0,1.0)。ease：逐漸變慢。該值為默認(rèn)值，等同于貝塞爾曲線(0.25,0.1,0.25,1.0)。ease-in：加速。該值等同于貝塞爾曲線(0.42,0,1.0,1.0)。ease-out：減速。該值等同于貝塞爾曲線(0,0,0.58,1.0)。ease-in-out：先加速再減速。該值為默認(rèn)值，等同于貝塞爾曲線(0.42,0,0.58,1.0)。cubic-bezier：使用貝賽爾曲線函數(shù)自定義速度變化。11.3.2CSS3

Transition動(dòng)畫4.漸變延遲時(shí)間transition-delay在CSS3中transition-delay屬性用于指定漸變動(dòng)畫延遲播放的時(shí)間，延遲時(shí)間越長則動(dòng)畫越晚播放。其語法格式如下：例如，為段落元素p指定漸變延遲時(shí)間為10秒：transition-delay:<time>;該屬性值單位為秒或者毫秒。其缺省狀態(tài)為0s，表示不延遲立刻播放動(dòng)畫效果。p{transition-delay:10s;}11.3.2CSS3

Transition動(dòng)畫4.漸變延遲時(shí)間transition-delay如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{transition-delay:10s;/*兼容舊版Firefox*/-moz-transition-delay:10s;/*兼容舊版SafariandChrome*/-webkit-transition-delay:10s;}11.3.2CSS3

Transition動(dòng)畫5.漸變復(fù)合屬性transition在CSS3中transition屬性用于一次性指定所有的動(dòng)畫設(shè)置要求，是一個(gè)復(fù)合屬性。其聲明常用順序如下:[transition-property][transition-duration][transition-timing-function][transition-delay]參數(shù)之間使用空格隔開即可，如有未聲明的參數(shù)取其默認(rèn)值。需要注意的是，如果只提供了一個(gè)時(shí)間參數(shù)，無論其位置在何處均默認(rèn)為是transition-duration屬性值。11.3.2CSS3

Transition動(dòng)畫5.漸變復(fù)合屬性transition例如，為段落元素p指定一系列漸變效果:使用復(fù)合屬性transition可簡寫為：p{transition-property:background-color;transition-duration:10s;transition-timing-function:ease-in;transition-delay:10s;}p{transition:background-color10sease-in10s;}11.3.2CSS3

Transition動(dòng)畫5.漸變復(fù)合屬性transition還可以使用復(fù)合屬性transition同時(shí)指定多種漸變，之間用逗號(hào)隔開即可。例如:p{transition:background-color10sease-in10s,color10sease-in10s,width10sease-in10s;}11.3.2CSS3

Transition動(dòng)畫【例11-17】CSS3Transition動(dòng)畫效果

11.3.3CSS3Animation動(dòng)畫CSS3可以創(chuàng)建Animation動(dòng)畫效果。該動(dòng)畫可以自定義任意多個(gè)關(guān)鍵時(shí)間點(diǎn)的樣式效果，瀏覽器將自動(dòng)處理兩個(gè)關(guān)鍵時(shí)間節(jié)點(diǎn)之間的漸變效果，所有的關(guān)鍵幀組合在一起形成更復(fù)雜的動(dòng)畫效果。在網(wǎng)頁文檔中使用可取代Flash動(dòng)畫、動(dòng)態(tài)圖片和JavaScript。11.3.3CSS3Animation動(dòng)畫animation動(dòng)畫相關(guān)屬性一覽表屬性名稱解釋@keyframes用于設(shè)置自定義動(dòng)畫內(nèi)容。animation-name用于檢查或設(shè)置需要執(zhí)行的@keyframes動(dòng)畫的名稱。animation-duration用于檢查或設(shè)置動(dòng)畫完成的時(shí)間。默認(rèn)值為0。animation-timing-function用于檢查或設(shè)置動(dòng)畫的速度曲線，默認(rèn)值是ease。animation-delay用于檢查或設(shè)置動(dòng)畫延遲開始的時(shí)間。默認(rèn)值是0。animation-iteration-count用于檢查或設(shè)置動(dòng)畫的播放次數(shù)。默認(rèn)值為1。animation-direction用于檢查或設(shè)置動(dòng)畫在循環(huán)播放時(shí)的運(yùn)動(dòng)方向。animation-play-state用于檢查或設(shè)置動(dòng)畫是否在運(yùn)行或暫停狀態(tài)。默認(rèn)值為running。animation-fill-mode用于檢查或設(shè)置動(dòng)畫時(shí)間以外的狀態(tài)。animation復(fù)合屬性，用于一次性設(shè)置所有動(dòng)畫效果。11.3.3CSS3Animation動(dòng)畫1.@keyframes規(guī)則幀（frame）是影像動(dòng)畫中最小單位的單幅影像畫面，一幀就相當(dāng)于一副靜止的畫面，連續(xù)的幀可以形成動(dòng)畫效果。在CSS3中使用@keyframes規(guī)則定義一套動(dòng)畫效果中若干個(gè)關(guān)鍵幀的樣式效果，其格式如下：@keyframes動(dòng)畫名稱{from{樣式要求}to{樣式要求}}11.3.3CSS3Animation動(dòng)畫1.@keyframes規(guī)則其中動(dòng)畫名稱可以自定義，from表示起始幀的樣式，to表示最終幀的樣式。例如，定義一個(gè)名稱為myframe的動(dòng)畫，要求背景顏色起始為紅色，最終變?yōu)辄S色，其寫法如下：@keyframesmyframe{from{background-color:red}to{background-color:yellow}}11.3.3CSS3Animation動(dòng)畫1.@keyframes規(guī)則如果需要更豐富的動(dòng)畫效果，可以使用百分比來表示時(shí)間刻度。百分比的數(shù)值必須從0%開始到100%結(jié)束，中間的時(shí)間百分比數(shù)值和數(shù)量都可以自定義。這里的0%相當(dāng)于關(guān)鍵詞from的效果，100%相當(dāng)于關(guān)鍵詞to的效果。例如：@keyframes動(dòng)畫名稱{0%{樣式要求}25%{樣式要求}50%{樣式要求}75%{樣式要求}100%{樣式要求}}11.3.3CSS3Animation動(dòng)畫1.@keyframes規(guī)則創(chuàng)建完成的動(dòng)畫必須指定時(shí)長并綁定到目標(biāo)元素中方可生效。例如將剛才使用@keyframes創(chuàng)建的myframe動(dòng)畫使用到段落標(biāo)簽<p>上的寫法如下：p{animation:myframe8s;}上述代碼表示在8秒的時(shí)間范圍內(nèi)讓段落元素<p>進(jìn)行名稱為myframe的動(dòng)畫內(nèi)容。這里使用了復(fù)合屬性animation的簡寫形式，同時(shí)規(guī)定了動(dòng)畫名稱與動(dòng)畫的持續(xù)時(shí)間。11.3.3CSS3Animation動(dòng)畫2.動(dòng)畫應(yīng)用名稱animation-name在CSS3中animation-name屬性專門用于指定需要發(fā)生的動(dòng)畫名稱。該屬性值需要配合@keyframes規(guī)則使用，因?yàn)檫@里的動(dòng)畫名稱不可以自定義，必須是在@keyframes規(guī)則中已聲明的動(dòng)畫效果。其語法格式如下:animation-name:none|<identifier>;animation-name屬性的取值有以下兩種形式：none：不引用任何動(dòng)畫名稱，該屬性值為默認(rèn)值。<identifier>：定義一個(gè)或多個(gè)動(dòng)畫名稱，該名稱必須來源于@keyframes規(guī)則。11.3.3CSS3Animation動(dòng)畫2.動(dòng)畫應(yīng)用名稱animation-name例如，為段落元素p指定上一節(jié)設(shè)置的名稱為myframe的動(dòng)畫效果:p{animation-name:myframe;}11.3.3CSS3Animation動(dòng)畫2.動(dòng)畫應(yīng)用名稱animation-name如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{animation-name:myframe;/*兼容舊版Firefox*/-moz-animation-name:myframe;/*兼容舊版SafariandChrome*/-webkit-animation-name:myframe;}由于默認(rèn)情況下動(dòng)畫的持續(xù)時(shí)間為0，此時(shí)看不到動(dòng)畫效果。必須配合CSS3Animation動(dòng)畫中的animation-duration屬性重新規(guī)定動(dòng)畫時(shí)間方可看到完整動(dòng)畫效果。下一小節(jié)將介紹animation-duration屬性的用法。11.3.3CSS3Animation動(dòng)畫3.動(dòng)畫持續(xù)時(shí)間animation-duration在CSS3中animation-duration屬性用于指定動(dòng)畫效果的持續(xù)時(shí)長，持續(xù)時(shí)間越長動(dòng)畫效果越慢。其語法格式如下：animation-duration:<time>;該屬性值單位為秒或者毫秒。其缺省狀態(tài)為0s，元素會(huì)瞬間從原始狀態(tài)變成最終狀態(tài)，無法顯示動(dòng)畫過程，因此不建議省略animation-duration屬性的設(shè)置。11.3.3CSS3Animation動(dòng)畫3.動(dòng)畫持續(xù)時(shí)間animation-duration例如，為段落元素p指定剛才的myframe動(dòng)畫時(shí)間為10秒：p{animation-name:myframe;animation-duration:10s;}11.3.3CSS3Animation動(dòng)畫3.動(dòng)畫持續(xù)時(shí)間animation-duration如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{animation-name:myframe;animation-duration:10s;/*兼容舊版Firefox*/-moz-animation-name:myframe;-moz-animation-duration:10s;/*兼容舊版SafariandChrome*/-webkit-animation-name:myframe;-webkit-animation-duration:10s;}11.3.3CSS3Animation動(dòng)畫4.動(dòng)畫速率函數(shù)animation-timing-function在CSS3中animation-timing-function用于設(shè)置動(dòng)畫速率函數(shù)。與之前介紹的CSS3Transition動(dòng)畫中transition-timing-function屬性值類似，animation-timing-function屬性的取值有以下6種形式：linear：線性動(dòng)畫，表示勻速動(dòng)畫效果。該值等同于貝塞爾曲線(0.0,0.0,1.0,1.0)。ease：逐漸變慢。該值為默認(rèn)值，等同于貝塞爾曲線(0.25,0.1,0.25,1.0)。ease-in：表示由慢到快的加速效果。該值等同于貝塞爾曲線(0.42,0,1.0,1.0)。ease-out：表示由快到慢的減速效果。該值等同于貝塞爾曲線(0,0,0.58,1.0)。ease-in-out：先加速再減速。該值為默認(rèn)值，等同于貝塞爾曲線(0.42,0,0.58,1.0)。cubic-bezier：使用貝茲爾曲線函數(shù)自定義速度變化。11.3.3CSS3Animation動(dòng)畫5.動(dòng)畫延遲時(shí)間animation-delay在CSS3中animation-delay屬性用于指定動(dòng)畫延遲播放的時(shí)間，延遲時(shí)間越長則動(dòng)畫越晚播放。其語法格式如下：例如，為段落元素p指定漸變延遲時(shí)間為10秒：animation-delay:<time>;該屬性值單位為秒或者毫秒。其缺省狀態(tài)為0s，表示不延遲立刻播放動(dòng)畫效果。p{animation-delay:10s;}11.3.3CSS3Animation動(dòng)畫5.動(dòng)畫延遲時(shí)間animation-delay如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{animation-delay:10s;/*兼容舊版Firefox*/-moz-animation-delay:10s;/*兼容舊版SafariandChrome*/-webkit-animation-delay:10s;}11.3.3CSS3Animation動(dòng)畫6.動(dòng)畫循環(huán)次數(shù)animation-iteration-count在CSS3中animation-iteration-count屬性用于設(shè)置動(dòng)畫的循環(huán)播放次數(shù)。其語法格式如下：animation-iteration-count:infinite|<number>;animation-iteration-count屬性的取值有以下兩種形式：infinite：表示無限循環(huán)。<number>：用于規(guī)定動(dòng)畫循環(huán)播放的具體次數(shù)。該屬性的默認(rèn)值為1，表示只播放一次動(dòng)畫效果。11.3.3CSS3Animation動(dòng)畫6.動(dòng)畫循環(huán)次數(shù)animation-iteration-count例如，為段落元素p指定循環(huán)播放2次動(dòng)畫：p{animation-iteration-count:2;}11.3.3CSS3Animation動(dòng)畫6.動(dòng)畫循環(huán)次數(shù)animation-iteration-count如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{animation-iteration-count:2;/*兼容舊版Firefox*/-moz-animation-iteration-count:2;/*兼容舊版SafariandChrome*/-webkit-animation-iteration-count:2;}11.3.3CSS3Animation動(dòng)畫7.動(dòng)畫運(yùn)動(dòng)方向animation-direction在CSS3中animation-direction屬性用于指定循環(huán)播放動(dòng)畫的運(yùn)動(dòng)方向。其語法格式如下:animation-direction:normal|reverse|alternate|alternate-reverse;

animation-direction屬性的取值有以下4種形式：normal：正常方向運(yùn)行動(dòng)畫，該屬性值也是默認(rèn)值。reverse：反方向運(yùn)行動(dòng)畫。alternate：動(dòng)畫先正常運(yùn)行再反向運(yùn)行，并持續(xù)交替。alternate-reverse：動(dòng)畫先反向運(yùn)行再正常運(yùn)行，并持續(xù)交替。11.3.3CSS3Animation動(dòng)畫7.動(dòng)畫運(yùn)動(dòng)方向animation-direction例如，為段落元素p設(shè)置反向運(yùn)動(dòng)的動(dòng)畫效果:p{animation-direction:reverse;}11.3.3CSS3Animation動(dòng)畫7.動(dòng)畫運(yùn)動(dòng)方向animation-direction如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式:p{animation-direction:reverse;/*兼容舊版Firefox*/-moz-animation-direction:reverse;/*兼容舊版SafariandChrome*/-webkit-animation-direction:reverse;}11.3.3CSS3Animation動(dòng)畫7.動(dòng)畫運(yùn)動(dòng)方向animation-direction如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式:p{animation-direction:reverse;/*兼容舊版Firefox*/-moz-animation-direction:reverse;/*兼容舊版SafariandChrome*/-webkit-animation-direction:reverse;}11.3.3CSS3Animation動(dòng)畫8.動(dòng)畫之外狀態(tài)animation-fill-mode在CSS3中animation-fill-mode屬性用于指定動(dòng)畫效果之外的元素狀態(tài)。其語法格式如下:animation-fill-mode:none|forwards|backwards|both;animation-fill-mode屬性的取值有以下4種形式：none：不設(shè)置動(dòng)畫之外的元素狀態(tài)，該屬性值為默認(rèn)值。forwards：設(shè)置動(dòng)畫之外的元素狀態(tài)為動(dòng)畫結(jié)束時(shí)的樣式。backwards：設(shè)置動(dòng)畫之外的元素狀態(tài)為動(dòng)畫剛開始時(shí)的樣式。both：設(shè)置動(dòng)畫之外的元素狀態(tài)為動(dòng)畫剛開始或結(jié)束時(shí)的樣式。11.3.3CSS3Animation動(dòng)畫8.動(dòng)畫之外狀態(tài)animation-fill-mode例如，為段落元素p指定動(dòng)畫之外的狀態(tài)為動(dòng)畫結(jié)束時(shí)的樣式:p{animation-fill-mode:backwards;}11.3.3CSS3Animation動(dòng)畫8.動(dòng)畫之外狀態(tài)animation-fill-mode如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式:p{animation-fill-mode:backwards;/*兼容舊版Firefox*/-moz-animation-fill-mode:backwards;/*兼容舊版SafariandChrome*/-webkit-animation-fill-mode:backwards;}11.3.3CSS3Animation動(dòng)畫9.動(dòng)畫運(yùn)行狀態(tài)animation-play-state在CSS3中animation-play-state屬性用于檢索或設(shè)置動(dòng)畫運(yùn)行狀態(tài)。其語法格式如下:animation-play-state:running|paused;animation-play-state屬性的取值有以下兩種形式：running：動(dòng)畫為運(yùn)行狀態(tài)，該屬性值為默認(rèn)值。paused：動(dòng)畫為暫停狀態(tài)。11.3.3CSS3Animation動(dòng)畫9.動(dòng)畫運(yùn)行狀態(tài)animation-play-state例如，當(dāng)鼠標(biāo)懸浮在段落元素<p>上時(shí)暫停動(dòng)畫效果:p:hover{animation-play-state:paused;}11.3.3CSS3Animation動(dòng)畫9.動(dòng)畫運(yùn)行狀態(tài)animation-play-state如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式:p:hover{animation-play-state:paused;/*兼容舊版Firefox*/-moz-animation-play-state:paused;/*兼容舊版SafariandChrome*/-webkit-animation-play-state:paused;}11.3.3CSS3Animation動(dòng)畫10.動(dòng)畫復(fù)合屬性animation在CSS3中animation屬性用于一次性指定所有的動(dòng)畫設(shè)置要求，是一個(gè)復(fù)合屬性。其聲明常用順序如下:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state]參數(shù)之間使用空格隔開即可，如有未聲明的參數(shù)取其默認(rèn)值。需要注意的是，如果只提供了一個(gè)時(shí)間參數(shù)，無論其位置在何處均默認(rèn)為是transition-duration屬性值。11.3.3CSS3Animation動(dòng)畫10.動(dòng)畫復(fù)合屬性animation例如，為段落元素p指定一系列動(dòng)畫效果:使用復(fù)合屬性animation可簡寫為:p{animation-name:myAnimation;animation-duration:10s;animation-timing-function:ease-in;animation-delay:10s;}p{animation:myAnimation10sease-in10s;}11.3.3CSS3Animation動(dòng)畫10.動(dòng)畫復(fù)合屬性animation還可以使用復(fù)合屬性animation同時(shí)指定多種動(dòng)畫，之間用逗號(hào)隔開即可。例如:p{animation:myAnimation110sease-in10s,myAnimation210sease-in10s,myAnimation310sease-in10s;}11.3.3CSS3Animation動(dòng)畫【例11-18】CSS3Animation簡單動(dòng)畫效果

CSS3可以將文本布局分割為多個(gè)列，實(shí)現(xiàn)仿報(bào)紙排版效果。11.4CSS3多列11.4CSS3多列主流瀏覽器對(duì)CSS3中的多列顯示相關(guān)屬性支持情況如下表所示。主流瀏覽器對(duì)CSS3多列顯示的支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況10.0及以上版本9.0及以上版本4.0及以上版本6.0及以上版本綴15.0及以上版本

補(bǔ)充說明如下：Firefox：9.0-40.0版本支持使用前綴-moz-，寫成-moz-columns的形式。Chrome：4.0-45.0版本支持使用前綴-webkit-，寫成-webkit-columns的形式。Safari：6.0-8.0版本支持使用前綴-webkit-，寫成-webkit-columns的形式。Opera：15.0-29.0版本支持使用前綴-webkit-，寫成-webkit-columns的形式。11.4.1columns

CSS3中columns是一個(gè)復(fù)合屬性，用于同時(shí)設(shè)置目標(biāo)文本每列的寬度和列數(shù)。11.4.1columnscolumns語法結(jié)構(gòu)如下：columns：<column-width><column-count>columns包含的兩個(gè)參數(shù)解釋如下：column-width：用于設(shè)置每列的寬度?？商钊腴L度值用于指定每列的寬度。缺省值為auto，表示根據(jù)column-count屬性自動(dòng)分配寬度。column-count：用于設(shè)置文本分割的列數(shù)，可填入正整數(shù)用于指定