選擇qi：是表達(dá)式

標(biāo)簽選擇器

類選擇器

屬性選擇器

繼承屬性：

color霍比，font惯疙，text－align带猴，list－style

優(yōu)先

計(jì)算方法

a－＝＝＝行內(nèi)樣式

b－id選擇器的數(shù)量

c＝類姑丑，偽類和屬性選擇器的數(shù)量

d＝標(biāo)簽選擇器和微元素選擇器的數(shù)量

value＝a*1000+b*100+c*10+d

層疊

選擇同一個屬性會覆蓋

－優(yōu)先級

－后面會覆蓋前面的

改變優(yōu)先級－－

改變順序

提升選擇器的優(yōu)先級

！important

什么是css3呀忧？

CSS3是CSS2的升級版本师痕，3只是版本號，它在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能而账。 目前主流瀏覽器chrome胰坟、safari、firefox泞辐、opera笔横、甚至360都已經(jīng)支持了CSS3大部分功能了竞滓，IE10以后也開始全面支持CSS3了。

在編寫CSS3樣式時吹缔，不同的瀏覽器可能需要不同的前綴商佑。它表示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分，是瀏覽器的私有屬性厢塘，雖然目前較新版本的瀏覽器都是不需要前綴的茶没，但為了更好的向前兼容前綴還是少不了的。

前綴

瀏覽器

-webkit ? chrome和safari

-moz firefox

-ms IE

-o opera

cSS3能做什么俗冻？

CSS3給我們帶來了什么好處呢礁叔？簡單的說，CSS3把很多以前需要使用圖片和腳本來實(shí)現(xiàn)的效果迄薄、甚至動畫效果琅关，只需要短短幾行代碼就能搞定。比如圓角讥蔽，圖片邊框涣易，文字陰影和盒陰影，過渡冶伞、動畫等新症。

邊框：

圓角邊框 border－radius

陰影box－shadow

為邊框應(yīng)用圖片：邊框應(yīng)用圖片 border-image

顧名思義就是為邊框應(yīng)用背景圖片，它和我們常用的background屬性比較相似响禽。例如：

background:url(xx.jpg) 10px 20px no-repeat;

但是又比背景圖片復(fù)雜一些徒爹。

想象一下：一個矩形，有四個邊框芋类。如果應(yīng)用了邊框圖片隆嗅，圖片該怎么分布呢？ 圖片會自動被切割分成四等分侯繁。用于四個邊框胖喳。

可以理解為它是一個切片工具，會自動把用做邊框的圖片切割贮竟。怎么切割呢丽焊？為了方便理解，做了一張?zhí)厥獾膱D片咕别，由9個矩形（70*70像素）拼成的一張圖（210*210像素）技健，并標(biāo)注好序號，是不是像傳說中的九宮圖惰拱，如下：

我們把上圖當(dāng)作邊框圖片 來應(yīng)用一下雌贱， 看一看是什么效果

根據(jù)border-image的語法：

#border-image{

background:#F4FFFA;

width:210px; height:210px; border:70px solid #ddd;

border-image:url(borderimg.png) 70 repeat

}

效果：

從序號可以看出div的四個角分別對應(yīng)了背景圖片的四個角。而2,4,6,8 被重復(fù)。5在哪帽芽？因?yàn)槭菑乃闹芟蛑行那懈顖D片的所以，5顯示不出來翔冀。而在chrome瀏覽器中5是存在的导街，下圖的樣子：

repeat的意思就是重復(fù)，目前因?yàn)槭莿偤帽徽俗樱Ч床怀鰜戆峁濉Ｈ绻南翫IV的寬高，再來看重復(fù)的效果：

邊角部分為裁掉了控硼，可見repeat就是一直重復(fù)泽论，然后超出部分剪裁掉，而且是居中開始重復(fù)卡乾。

Round 參數(shù)：Round可以理解為圓滿的鋪滿翼悴。為了實(shí)現(xiàn)圓滿所以會壓縮（或拉伸）；

#border-image {

width:170px;

height:170px;

border:70px solid;

border-image:url(borderimg.png) 70 round;

}

效果：

可見圖片被壓扁了幔妨。

Stretch 很好理解就是拉伸鹦赎，有多長拉多長。有多遠(yuǎn)“滾”多遠(yuǎn)误堡。

border-image:url(borderimg.png) 70 stretch

看一下效果：

2,4,6,8分別被拉伸顯示古话。

注意：Chrome下，中間部分也會被拉伸锁施，webkit瀏覽器對于round屬性和repeat屬性似乎沒有區(qū)分陪踩，顯示效果是一樣的。

Firefox 26.0 下是可以準(zhǔn)確區(qū)分的悉抵。

任務(wù)

為DIV應(yīng)用下面的邊框圖片肩狂。圖片絕對路徑為：

http://img.mukewang.com/52e22a1c0001406e03040221.jpg

border－image｛

border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 60 40 round;｝

round-平鋪

repeat：重復(fù)

stretch：拉神

顏色：

顏色reba

漸變色彩

CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)。由于不同的渲染引擎實(shí)現(xiàn)漸變的語法不同基跑，這里我們只針對線性漸變的 W3C 標(biāo)準(zhǔn)語法來分析其用法婚温，其余大家可以查閱相關(guān)資料。W3C 語法已經(jīng)得到了 IE10+媳否、Firefox19.0+栅螟、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。

這一小節(jié)我們來說一下線性漸變：

參數(shù)：

第一個參數(shù):指定漸變方向篱竭，可以用“角度”的關(guān)鍵詞或“英文”來表示：

background-image:linear-gradient(to top left,red, orange,yellow,green,blue,indigo,violet);

文字與字體：

text-overflow 與 word-wrap

text-overflow用來設(shè)置是否使用一個省略標(biāo)記（...）標(biāo)示對象內(nèi)文本的溢出力图。

語法：

但是text-overflow只是用來說明文字溢出時用什么方式顯示，要實(shí)現(xiàn)溢出時產(chǎn)生省略號的效果掺逼，還須定義強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）吃媒，只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號的效果，代碼如下：

text-overflow:ellipsis表示顯示省略標(biāo)記｜｜c(diǎn)lip剪切

overflow:hidden;

white-space:nowrap;強(qiáng)制文本在一行內(nèi)顯示幾溢出內(nèi)容為隱藏overflow：hidden；

同時赘那，word-wrap也可以用來設(shè)置文本行為刑桑，當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行。

word-wrap:normal表示控制連續(xù)文本換行|break-word表示內(nèi)容講在邊界內(nèi)換行;

語法：

normal為瀏覽器默認(rèn)值募舟，break-word設(shè)置在長單詞或 URL地址內(nèi)部進(jìn)行換行祠斧，此屬性不常用，用瀏覽器默認(rèn)值即可拱礁。

切入字體@font－face能夠加載服務(wù)器端的字體文件琢锋，讓瀏覽器端可以顯示用戶電腦沒有安裝的字體

語法：

@font－face｛

font－family：字體名稱；

src：‘字體文件在服務(wù)器上的相對或絕對路徑‘｝

p {

font-size :12px;

font-family : "My Font";

/*必須項(xiàng)呢灶，設(shè)置@font-face中font-family同樣的值*/

}

文本陰影text-shadow

text-shadow可以用來設(shè)置文本的陰影效果吴超。

語法：

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示陰影的水平偏移距離，其值為正值時陰影向右偏移鸯乃，反之向左偏移鲸阻；

Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時飒责，陰影向下偏移赘娄，反之向上偏移；

Blur：是指陰影的模糊程度宏蛉，其值不能是負(fù)值遣臼，如果值越大，陰影越模糊拾并，反之陰影越清晰揍堰，如果不需要陰影模糊可以將Blur值設(shè)置為0；

Color：是指陰影的顏色嗅义，其可以使用rgba色屏歹。

比如，我們可以用下面代碼實(shí)現(xiàn)設(shè)置陰影效果之碗。

與背景相關(guān)的樣式：

1.background-origin

設(shè)置元素背景圖片的原始起始位置蝙眶。

語法：

background-origin ： border-box | padding-box | content-box;

參數(shù)分別表示背景圖片是從邊框，還是內(nèi)邊距（默認(rèn)值）褪那，或者是內(nèi)容區(qū)域開始顯示幽纷。

效果如下：

需要注意的是，如果背景不是no-repeat博敬，這個屬性無效友浸，它會從邊框開始顯示偏窝。

2.background-clip

用來將背景圖片做適當(dāng)?shù)牟眉粢赃m應(yīng)實(shí)際需要收恢。

語法：

background-clip ： border-box | padding-box | content-box | no-clip

參數(shù)分別表示從邊框武学、或內(nèi)填充，或者內(nèi)容區(qū)域向外裁剪背景伦意。no-clip表示不裁切火窒，和參數(shù)border-box顯示同樣的效果。backgroud-clip默認(rèn)值為border-box驮肉。

3.background-size

設(shè)置背景圖片的大小沛鸵，以長度值或百分比顯示，還可以通過cover和contain來對圖片進(jìn)行伸縮缆八。

語法：

background-size: auto | <長度值> | <百分比> | cover | contain

取值說明：

1、auto：默認(rèn)值疾捍，不改變背景圖片的原始高度和寬度奈辰；

2、<長度值>：成對出現(xiàn)如200px 50px乱豆，將背景圖片寬高依次設(shè)置為前面兩個值奖恰，當(dāng)設(shè)置一個值時，將其作為圖片寬度值來等比縮放宛裕；

3瑟啃、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設(shè)置為所在元素寬高乘以前面百分比得出的數(shù)值揩尸，當(dāng)設(shè)置一個值時同上蛹屿；

4、cover：顧名思義為覆蓋岩榆，即將背景圖片等比縮放以填滿整個容器错负；

5、contain：容納勇边，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止犹撒。

提示：大家可以在右邊的編輯窗口輸入自己的代碼嘗試不同取值的效果。

4multiple backgrounds

多重背景粒褒，也就是CSS2里background的屬性外加origin识颊、clip和size組成的新background的多次疊加，縮寫時為用逗號隔開的每組值奕坟；用分解寫法時祥款，如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個）执赡，表明所有背景圖片應(yīng)用該屬性值镰踏。

語法縮寫如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

用逗號隔開每組 background 的縮寫值；

如果有 size 值沙合，需要緊跟 position 并且用 "/" 隔開奠伪；

如果有多個背景圖片跌帐，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應(yīng)用該屬性值绊率。

css3中變形與動畫

background-color 只能設(shè)置一個谨敛。

變形--旋轉(zhuǎn) rotate()

旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)使元素相對原點(diǎn)進(jìn)行旋轉(zhuǎn)。它主要在二維空間內(nèi)進(jìn)行操作滤否，設(shè)置一個角度值脸狸，用來指定旋轉(zhuǎn)的幅度。如果這個值為正值藐俺，元素相對原點(diǎn)中心順時針旋轉(zhuǎn)炊甲；如果這個值為負(fù)值，元素相對原點(diǎn)中心逆時針旋轉(zhuǎn)

變形--扭曲 skew()扭曲skew()函數(shù)能夠讓元素傾斜顯示欲芹。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜卿啡。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)菱父，而不會改變元素的形狀颈娜。skew()函數(shù)不會旋轉(zhuǎn)，而只會改變元素的形狀浙宜。Skew()具有三種情況：1官辽、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進(jìn)行扭曲變形）；第一個參數(shù)對應(yīng)X軸粟瞬，第二個參數(shù)對應(yīng)Y軸同仆。如果第二個參數(shù)未提供，則值為0裙品，也就是Y軸方向上無斜切乓梨。2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）清酥；3扶镀、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）示例演示：通過skew（）函數(shù)將長方形變成平行四邊形。HTML代碼：

我變成平形四邊形

CSS代碼：.wrapper {? width: 300px;? height: 100px;? border: 2px dotted red;? margin: 30px auto;}.wrapper div {? width: 300px;? height: 100px;? line-height: 100px;? text-align: center;? color: #fff;? background: orange;? -webkit-transform: skew(45deg);? -moz-transform:skew(45deg)?? transform:skew(45deg);}

變形--縮放 scale()

縮放 scale()函數(shù) 讓元素根據(jù)中心原點(diǎn)對對象進(jìn)行縮放焰轻。

縮放 scale 具有三種情況：

1臭觉、 scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）

2、scaleX(x)元素僅水平方向縮放（X軸縮放）

3辱志、scaleY(y)元素僅垂直方向縮放（Y軸縮放）

變形--位移 translate()

translate()函數(shù)可以將元素向指定的方向移動蝠筑，類似于position中的relative】粒或以簡單的理解為什乙，使用translate()函數(shù)，可以把元素從原來的位置移動已球，而不影響在X臣镣、Y軸上的任何Web組件辅愿。

translate我們分為三種情況：

1、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）

2忆某、translateX(x)僅水平方向移動（X軸移動）

3点待、translateY(Y)僅垂直方向移動（Y軸移動）

實(shí)例演示：通過translate()函數(shù)將元素向Y軸下方移動50px,X軸右方移動100px。

變形--矩陣 matrix()

matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣弃舒，用來指定一個2D變換癞埠，相當(dāng)于直接應(yīng)用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學(xué)中的矩陣聋呢，我在這里只是簡單的說一下CSS3中的transform有這么一個屬性值苗踪，如果需要深入了解，需要對數(shù)學(xué)矩陣有一定的知識削锰。

示例演示：通過matrix()函數(shù)來模擬transform中translate()位移的效果徒探。

變形--原點(diǎn) transform-origin

任何一個元素都有一個中心點(diǎn)，默認(rèn)情況之下喂窟，其中心點(diǎn)是居于元素X軸和Y軸的50%處。如下圖所示：

在沒有重置transform-origin改變元素原點(diǎn)位置的情況下央串，CSS變形進(jìn)行的旋轉(zhuǎn)磨澡、位移、縮放质和，扭曲等操作都是以元素自己中心位置進(jìn)行變形稳摄。但很多時候，我們可以通過transform-origin來對元素進(jìn)行原點(diǎn)位置改變饲宿，使元素原點(diǎn)不在元素的中心位置厦酬，以達(dá)到需要的原點(diǎn)位置。

transform-origin取值和元素設(shè)置背景中的background-position取值類似瘫想，如下表所示：

動畫--過渡屬性 transition-property

早期在Web中要實(shí)現(xiàn)動畫效果仗阅，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了一個新的模塊transition国夜，它可以通過一些簡單的CSS事件來觸發(fā)元素的外觀變化减噪，讓效果顯得更加細(xì)膩。簡單點(diǎn)說车吹，就是通過鼠標(biāo)的單擊筹裕、獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)窄驹，并平滑地以動畫效果改變CSS的屬性值朝卒。

在CSS中創(chuàng)建簡單的過渡效果可以從以下幾個步驟來實(shí)現(xiàn)：

第一，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式乐埠；

第二抗斤，聲明過渡元素最終狀態(tài)樣式囚企，比如懸浮狀態(tài)；

第三豪治，在默認(rèn)樣式中通過添加過渡函數(shù)洞拨，添加一些不同的樣式。

CSS3的過度transition屬性是一個復(fù)合屬性负拟，主要包括以下幾個子屬性：

transition-property:指定過渡或動態(tài)模擬的CSS屬性

transition-duration:指定完成過渡所需的時間

transition-timing-function:指定過渡函數(shù)

transition-delay:指定開始出現(xiàn)的延遲時間

先來看transition-property屬性

transition-property用來指定過渡動畫的CSS屬性名稱烦衣，而這個過渡屬性只有具備一個中點(diǎn)值的屬性（需要產(chǎn)生動畫的屬性）才能具備過渡效果，其對應(yīng)具有過渡的CSS屬性主要有：

動畫--過渡延遲時間 transition-delay

transition-delay屬性和transition-duration屬性極其類似掩浙，不同的是transition-duration是用來設(shè)置過渡動畫的持續(xù)時間花吟，而transition-delay主要用來指定一個動畫開始執(zhí)行的時間，也就是說當(dāng)改變元素屬性值后多長時間開始執(zhí)行厨姚。

有時我們想改變兩個或者多個css屬性的transition效果時衅澈，只要把幾個transition的聲明串在一起，用逗號（“谬墙，”）隔開今布，然后各自可以有各自不同的延續(xù)時間和其時間的速率變換方式。但需要值得注意的一點(diǎn)：第一個時間的值為 transition-duration拭抬，第二個為transition-delay部默。

例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

示例演示：

通過transition屬性將一個200px *200px的橙色容器，在鼠標(biāo)懸浮狀態(tài)時造虎，過渡到一個300px * 300px的紅色容器傅蹂。而且整個過渡0.1s后觸發(fā)，并且整個過渡持續(xù)0.28s算凿。

css3中的變形與動畫

Keyframes介紹

Keyframes被稱為關(guān)鍵幀份蝴，其類似于Flash中的關(guān)鍵幀。在CSS3中其主要以“@keyframes”開頭氓轰，后面緊跟著是動畫名稱加上一對花括號“{…}”婚夫，括號中就是一些不同時間段樣式規(guī)則。

@keyframes changecolor{

0%{

background: red;

}

100%{

background: green;

}

}

在一個“@keyframes”中的樣式規(guī)則可以由多個百分比構(gòu)成的署鸡，如在“0%”到“100%”之間創(chuàng)建更多個百分比请敦，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達(dá)到一種在不斷變化的效果储玫。

經(jīng)驗(yàn)與技巧：在@keyframes中定義動畫名稱時侍筛，其中0%和100%還可以使用關(guān)鍵詞from和to來代表，其中0%對應(yīng)的是from撒穷，100%對應(yīng)的是to匣椰。

調(diào)用動畫

animation-name屬性主要是用來調(diào)用 @keyframes 定義好的動畫。需要特別注意: animation-name 調(diào)用的動畫名需要和“@keyframes”定義的動畫名稱完全一致（區(qū)分大小寫）端礼，如果不一致將不具有任何動畫效果禽笑。

語法：

animation-name: none | IDENT[,none|DENT]*;

1入录、IDENT是由 @keyframes 創(chuàng)建的動畫名，上面已經(jīng)講過了（animation-name 調(diào)用的動畫名需要和“@keyframes”定義的動畫名稱完全一致）佳镜；

2僚稿、none為默認(rèn)值，當(dāng)值為 none 時蟀伸，將沒有任何動畫效果,這可以用于覆蓋任何動畫蚀同。

注意：需要在 Chrome 和 Safari 上面的基礎(chǔ)上加上-webkit-前綴，F(xiàn)irefox加上-moz-啊掏。

設(shè)置動畫播放時間

animation-duration主要用來設(shè)置CSS3動畫播放時間蠢络，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續(xù)的時間長迟蜜，也就是完成從0%到100%一次動畫所需時間刹孔。單位：S秒語法規(guī)則animation-duration:[,]*取值為數(shù)值，單位為秒娜睛，其默認(rèn)值為“0”髓霞，這意味著動畫周期為“0”惹悄，也就是沒有動畫效果（如果值為負(fù)值會被視為“0”）邑闺。

設(shè)置動畫播放方式

animation-timing-function屬性主要用來設(shè)置動畫播放方式。主要讓元素根據(jù)時間的推進(jìn)來改變屬性值的變換速率沼本，簡單點(diǎn)說就是動畫的播放方式兢交。語法規(guī)則：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,)]*

它和transition中的transition-timing-function一樣，具有以下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier笼痹。

設(shè)置動畫開始播放的時間

animation-delay屬性用來定義動畫開始播放的時間配喳，用來觸發(fā)動畫播放的時間點(diǎn)。和transition-delay屬性一樣凳干，用于定義在瀏覽器開始執(zhí)行動畫之前等待的時間晴裹。語法規(guī)則：animation-delay:[,]*

案例演示：

瀏覽器渲染樣式之后2S之后觸發(fā)move動畫。

設(shè)置動畫播放次數(shù)

animation-iteration-count屬性主要用來定義動畫的播放次數(shù)救赐。語法規(guī)則：animation-iteration-count: infinite |[, infinite |]*

1涧团、其值通常為整數(shù)，但也可以使用帶有小數(shù)的數(shù)字经磅，其默認(rèn)值為1泌绣，這意味著動畫將從開始到結(jié)束只播放一次。

2预厌、如果取值為infinite阿迈，動畫將會無限次的播放。

設(shè)置動畫播放方向

animation-direction屬性主要用來設(shè)置動畫播放方向轧叽，其語法規(guī)則如下：

animation-direction:normal | alternate [, normal | alternate]*

其主要有兩個值：normal苗沧、alternate

1刊棕、normal是默認(rèn)值，如果設(shè)置為normal時待逞，動畫的每次循環(huán)都是向前播放甥角；

2、另一個值是alternate识樱，他的作用是嗤无，動畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放牺荠。

例如：通過animation-direction屬性翁巍，將move動畫播放動畫方向設(shè)置為alternate，代碼為：

animation-direction:alternate;

注意：Chrome或Safari瀏覽器休雌，需要加入-webkit-前綴灶壶！

設(shè)置動畫的播放狀態(tài)

animation-play-state屬性主要用來控制元素動畫的播放狀態(tài)。

參數(shù)：

其主要有兩個值：running和paused杈曲。

其中running是其默認(rèn)值驰凛，主要作用就是類似于音樂播放器一樣，可以通過paused將正在播放的動畫停下來担扑，也可以通過running將暫停的動畫重新播放恰响，這里的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放涌献。另外如果暫停了動畫的播放胚宦，元素的樣式將回到最原始設(shè)置狀態(tài)。

例如燕垃，頁面加載時枢劝，動畫不播放。代碼如下：

animation-play-state:paused;

設(shè)置動畫時間外屬性

animation-fill-mode屬性定義在動畫開始之前和結(jié)束之后發(fā)生的操作卜壕。主要具有四個屬性值：none您旁、forwards、backwords和both轴捎。其四個屬性值對應(yīng)效果如下：

屬性值

效果

none

默認(rèn)值鹤盒，表示動畫將按預(yù)期進(jìn)行和結(jié)束，在動畫完成其最后一幀時侦副，動畫會反轉(zhuǎn)到初始幀處

forwards

表示動畫在結(jié)束后繼續(xù)應(yīng)用最后的關(guān)鍵幀的位置

backwards

會在向元素應(yīng)用動畫樣式時迅速應(yīng)用動畫的初始幀

both

元素動畫同時具有forwards和backwards效果

在默認(rèn)情況之下侦锯，動畫不會影響它的關(guān)鍵幀之外的屬性，使用animation-fill-mode屬性可以修改動畫的默認(rèn)行為秦驯。簡單的說就是告訴動畫在第一關(guān)鍵幀上等待動畫開始率触，或者在動畫結(jié)束時停在最后一個關(guān)鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果

布局樣式相關(guān)：

多列布局——Columns

為了能在Web頁面中方便實(shí)現(xiàn)類似報紙葱蝗、雜志那種多列排版的布局穴张，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面两曼，這種布局在報紙和雜志上都使用了幾十年了皂甘，但要在Web頁面上實(shí)現(xiàn)這樣的效果還是有相當(dāng)大的難度，慶幸的是悼凑，CSS3的多列布局可以輕松實(shí)現(xiàn)偿枕。接下來咱們一起學(xué)習(xí)多列布局相關(guān)的知識。語法：columns：||多列布局columns屬性參數(shù)主要就兩個屬性參數(shù)：列寬和列數(shù)户辫。參數(shù)參數(shù)說明主要用來定義多列中每列的寬度主要用來定義多列中的列數(shù)

多列布局——column-widthcolumn-width的使用和CSS中的width屬性一樣渐夸，不過不同的是，column-width屬性在定義元素列寬的時候渔欢，既可以單獨(dú)使用墓塌，也可以和多列屬性中其他屬性配合使用。其基本語法如下所示 奥额；column-width: auto |取值說明屬性值說明auto如果column-width設(shè)置值為auto或者沒有顯式的設(shè)置值時苫幢，元素多列的列寬將由其他屬性來決定，比如前面的示例就是由列數(shù)column-count來決定垫挨。使用固定值來設(shè)置元素列的寬度韩肝，其主要是由數(shù)值和長度單位組成，不過其值只能是正值九榔，不能為負(fù)值哀峻。

多列布局——column-countcolumn-count屬性主要用來給元素指定想要的列數(shù)和允許的最大列數(shù)。其語法規(guī)則：column-count：auto |取值說明：屬性值屬性值說明auto此值為column-count的默認(rèn)值哲泊，表示元素只有一列剩蟀，其主要依靠瀏覽器計(jì)算自動設(shè)置。此值為正整數(shù)值攻旦，主要用來定義元素的列數(shù)喻旷，取值為大于0的整數(shù)生逸，負(fù)值無效牢屋。

列間距column-gapcolumn-gap主要用來設(shè)置列與列之間的間距，其語法規(guī)則如下：column-gap: normal ||取值說明屬性值屬性值說明normal默認(rèn)值槽袄，默值為1em（如果你的字號是px烙无，其默認(rèn)值為你的font-size值）。此值用來設(shè)置列與列之間的距離遍尺，其可以使用px,em單位的任何整數(shù)值截酷，但不能是負(fù)值。

表邊框column-rulecolumn-rule主要是用來定義列與列之間的邊框?qū)挾惹贰⑦吙驑邮胶瓦吙蝾伾乜痢：唵吸c(diǎn)說三热，就有點(diǎn)類似于常用的border屬性。但column-rule是不占用任何空間位置的三幻，在列與列之間改變其寬度不會改變?nèi)魏瘟械奈恢镁脱ＵZ法規(guī)則：column-rule:||取值說明：

屬性值

屬性值說明

column-rule-width

類似于border-width屬性，主要用來定義列邊框的寬度念搬，其默認(rèn)值為“medium”抑堡，column-rule-width屬性接受任意浮點(diǎn)數(shù)，但不接收負(fù)值朗徊。但也像border-width屬性一樣首妖，可以使用關(guān)鍵詞：medium、thick和thin爷恳。

column-rule-style

類似于border-style屬性有缆，主要用來定義列邊框樣式，其默認(rèn)值為“none”舌仍。column-rule-style屬性值與border-style屬值相同妒貌，包括none、hidden铸豁、dotted灌曙、dashed、solid节芥、double在刺、groove、ridge头镊、inset蚣驼、outset。

column-rule-color

類似于border-color屬性相艇，主要用來定義列邊框顏色颖杏，其默認(rèn)值為前景色color的值，使用時相當(dāng)于border-color坛芽。column-rule-color接受所有的顏色留储。如果不希望顯示顏色，也可以將其設(shè)置為transparent(透明色)

跨列設(shè)置column-span

column-span主要用來定義一個分列元素中的子元素能跨列多少咙轩。column-width获讳、column-count等屬性能讓一元素分成多列，不管里面元素如何排放順序活喊，他們都是從左向右的放置內(nèi)容丐膝，但有時我們需要基中一段內(nèi)容或一個標(biāo)題不進(jìn)行分列，也就是橫跨所有列，此時column-span就可以輕松實(shí)現(xiàn)帅矗，此屬性的語法如下偎肃。

column-span: none | all

取值說明

屬性值

屬性值說明

none

此值為column-span的默認(rèn)值，表示不跨越任何列浑此。

all

這個值跟none值剛好相反软棺，表示的是元素跨越所有列，并定位在列的Ｚ軸之上尤勋。

盒子模型

盒子模型

CSS中有一種基礎(chǔ)設(shè)計(jì)模式叫盒模型喘落，盒模型定義了Web頁面中的元素中如何來解析。CSS中每一個元素都是一個盒模型最冰，包括html和body標(biāo)簽元素瘦棋。在盒模型中主要包括width、height暖哨、border赌朋、background、padding和margin這些屬性篇裁，而且他們之間的層次關(guān)系可以相互影響沛慢，來看一張盒模型的3D展示圖：

（單擊可放大）

從圖中可以看出padding屬性和content屬性層疊background-image屬性，層疊background-color屬性达布，這個是存在的团甲，它們四者之間構(gòu)成了Ｚ軸（垂直屏幕的坐標(biāo)）多重層疊關(guān)系。但是border屬性與margin屬性黍聂、padding屬性三者之間應(yīng)該是平面上的并級關(guān)系躺苦，并不能構(gòu)成Ｚ軸的層疊關(guān)系。

box-sizing：

在CSS中盒模型被分為兩種产还，第一種是w3c的標(biāo)準(zhǔn)模型匹厘，另一種是IE的傳統(tǒng)模型，它們相同之處都是對元素計(jì)算尺寸的模型脐区，具體說不是對元素的width愈诚、height、padding和border以及元素實(shí)際尺寸的計(jì)算關(guān)系牛隅，它們不同之處是兩者的計(jì)算方法不一致炕柔，原則上來說盒模型是分得很細(xì)的，這里所看到的主要是外盒模型和內(nèi)盒模型倔叼，如下面計(jì)算公式所示：

W3C標(biāo)準(zhǔn)盒模型

外盒尺寸計(jì)算（元素空間尺寸）

element空間高度＝內(nèi)容高度＋內(nèi)距＋邊框＋外距

element空間寬度＝內(nèi)容寬度＋內(nèi)距＋邊框＋外距

內(nèi)盒尺寸計(jì)算（元素大泻钩）

element高度＝內(nèi)容高度＋內(nèi)距＋邊框（height為內(nèi)容高度）

element寬度＝內(nèi)容寬度＋內(nèi)距＋邊框（width為內(nèi)容寬度）

2.IE傳統(tǒng)下盒模型（IE6以下宫莱，不包含IE6版本或”QuirksMode下IE5.5+”）

外盒尺寸計(jì)算（元素空間尺寸）

element空間高度＝內(nèi)容高度＋外距（height包含了元素內(nèi)容寬度丈攒、邊框、內(nèi)距）

element寬間寬度＝內(nèi)容寬度＋外距（width包含了元素內(nèi)容寬度、邊框巡验、內(nèi)距）

內(nèi)盒尺寸計(jì)算（元素大屑什濉）

element高度＝內(nèi)容高度（height包含了元素內(nèi)容寬度、邊框显设、內(nèi)距）

element寬度＝內(nèi)容寬度（width包含了元素內(nèi)容寬度框弛、邊框、內(nèi)距）

在CSS3中新增加了box-sizing屬性捕捂，能夠事先定義盒模型的尺寸解析方式瑟枫，其語法規(guī)則如下：

box-sizing: content-box | border-box | inherit

取值說明

屬性值

屬性值說明

content-box

默認(rèn)值，其讓元素維持W3C的標(biāo)準(zhǔn)盒模型指攒，也就是說元素的寬度和高度（width/height）等于元素邊框?qū)挾龋╞order）加上元素內(nèi)距（padding）加上元素內(nèi)容寬度或高度（content width/ height）慷妙，也就是element width/height = border + padding + content width / height

border-box

重新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統(tǒng)的盒模型（IE6以下版本和IE6-7怪異模式）允悦，也就是說元素的寬度或高度等于元素內(nèi)容的寬度或高度膝擂。從上面盒模型介紹可知，這里的內(nèi)容寬度或高度包含了元素的border隙弛、padding架馋、內(nèi)容的寬度或高度（此處的內(nèi)容寬度或高度＝盒子的寬度或高度—邊框—內(nèi)距）。

inherit

使元素繼承父元素的盒模型模式

其中最為關(guān)鍵的是box-sizing中content-box和border-box兩者的區(qū)別全闷，他們之間的區(qū)別可以通過下圖來展示叉寂，其對盒模型的不同解析：

伸縮布局（一）

CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box）总珠，用來提供一個更加有效的方式制定办绝、調(diào)整和分布一個容器里項(xiàng)目布局，即使它們的大小是未知或者動態(tài)的姚淆，這里簡稱為Flex孕蝉。

Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時保持元素的相對位置和大小不變腌逢，同時減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小降淮。

Flexbox布局在定義伸縮項(xiàng)目大小時伸縮容器會預(yù)留一些可用空間，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置搏讶。例如佳鳖，你可以確保伸縮容器中的多余空間平均分配多個伸縮項(xiàng)目，當(dāng)然媒惕，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時系吩，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小，使其不溢出伸縮容器妒蔚。綜合而言穿挨，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)：

第一月弛，屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局；

第二科盛，可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）帽衙，從而調(diào)整伸縮項(xiàng)目的大小贞绵；

第三厉萝，可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間，分配到伸縮項(xiàng)目之前榨崩、之后或之間谴垫；

第四，可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍母蛛；

第五弹渔，可以控制元素在頁面上的布局方向；

第六溯祸，可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序肢专。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序。

Flexbox規(guī)范版本眾多焦辅，瀏覽器對此語法支持度也各有不同博杖，接下來的內(nèi)容以最新語法版本為例向大家展示：

1.創(chuàng)建一個flex容器

任何一個flexbox布局的第一步是需要創(chuàng)建一個flex容器。為此給元素設(shè)置display屬性的值為flex筷登。在Safari瀏覽器中剃根，你依然需要添加前綴-webkit，

.flexcontainer{ display: -webkit-flex; display: flex; }

2.Flex項(xiàng)目顯示

Flex項(xiàng)目是Flex容器的子元素前方。他們沿著主要軸和橫軸定位狈醉。默認(rèn)的是沿著水平軸排列一行。你可以通過flex-direction來改變主軸方向修改為column惠险，其默認(rèn)值是row苗傅。

3.Flex項(xiàng)目列顯示

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

4.Flex項(xiàng)目移動到頂部

如何將flex項(xiàng)目移動到頂部，取決于主軸的方向班巩。如果它是垂直的方向通過align-items設(shè)置渣慕；如果它是水平的方向通過justify-content設(shè)置。

.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

伸縮布局（二）

Flexbox規(guī)范版本眾多抱慌，瀏覽器對此語法支持度也各有不同逊桦，接下來的內(nèi)容以最新語法版本為例向大家展示：（接上一節(jié)）

5.Flex項(xiàng)目移到左邊

flex項(xiàng)目稱動到左邊或右邊也取決于主軸的方向。如果flex-direction設(shè)置為row抑进，設(shè)置justify-content控制方向强经；如果設(shè)置為column，設(shè)置align-items控制方向寺渗。

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }

6.Flex項(xiàng)目移動右邊

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

7.水平垂直居中

在Flexbox容器中制作水平垂直居中是微不足道的匿情。設(shè)置justify-content或者align-items為center兰迫。另外根據(jù)主軸的方向設(shè)置flex-direction為row或column。

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

8.Flex項(xiàng)目實(shí)現(xiàn)自動伸縮

您可以定義一個flex項(xiàng)目码秉，如何相對于flex容器實(shí)現(xiàn)自動的伸縮。需要給每個flex項(xiàng)目設(shè)置flex屬性設(shè)置需要伸縮的值鸡号。

.bigitem{ -webkit-flex:200; flex:200; }? .smallitem{ -webkit-flex:100; flex:100; }

第11章 Media Queries 與Responsive ...

Media Queries——媒體類型（一）

隨著科學(xué)技術(shù)不斷的向前發(fā)展转砖，網(wǎng)頁的瀏覽終端越來越多樣化，用戶可以通過：寬屏電視鲸伴、臺式電腦府蔗、筆記本電腦、平板電腦和智能手機(jī)來訪問你的網(wǎng)站汞窗。盡管你無法保證一個網(wǎng)站在不同屏幕尺寸和不同設(shè)備上看起來完全一模一樣姓赤，但至少要讓你的Web頁面能適配用戶的終端，讓他更好的呈現(xiàn)在你的用戶面前仲吏。在本節(jié)中不铆，將會學(xué)到如何使用CSS3中的Media Queries模塊來讓一個頁面適應(yīng)不同的終端（或屏幕尺寸），從而讓你的頁面讓用戶有一個更好的體驗(yàn)裹唆。

Media Queries

Media Queries是CSS3新增加的一個模塊功能誓斥，其最大的特色就是通過CSS3來查詢媒體，然后調(diào)用對應(yīng)的樣式许帐。其實(shí)這個功能在CSS2.1中就有出現(xiàn)過劳坑，只不過那個時候此功能并不強(qiáng)大，我們最常見的就是給打印設(shè)備添加打印樣式成畦。隨著時代的變化距芬，這個模塊功能越來越強(qiáng)大。

在徹底的了解Media Queries我們需要了解其中的兩個重要部分循帐，第一個是媒體類型框仔，第二個是媒體特性。下面的內(nèi)容我們簡單的來了解這兩個部分：

一拄养、媒體類型

媒體類型（Media Type）在CSS2中是一個常見的屬性存和，也是一個非常有用的屬性，可以通過媒體類型對不同的設(shè)備指定不同的樣式衷旅。

在CSS2中常碰到的就是all(全部)捐腿、screen(屏幕)、print(頁面打印或打印預(yù)覽模式)柿顶，其實(shí)媒體類型遠(yuǎn)不止這三種茄袖，W3C總共列出了10種媒體類型。如下表所示：

值

設(shè)備類型

All

所有設(shè)備

Braille

盲人用點(diǎn)字法觸覺回饋設(shè)備

Embossed

盲文打印機(jī)

Handheld

便攜設(shè)備

Print

打印用紙或打印預(yù)覽視圖

Projection

各種投影設(shè)備

Screen

電腦顯示器

Speech

語音或音頻合成器

Tv

電視機(jī)類型設(shè)備

Tty

使用固定密度字母柵格的媒介嘁锯，比如電傳打字機(jī)和終端

其中Screen宪祥、All和Print為最常見的三種媒體類型聂薪。

media queries——媒體類型（二）

在實(shí)際中媒體類型有近十種之多，實(shí)際之中常用的也就那么幾種蝗羊，不過媒體類型的引用方法也有多種藏澳，

常見的有：link標(biāo)簽、@import和CSS3新增的@media幾種：link方法link方法引入媒體類型其實(shí)就是在標(biāo)簽引用樣式的時候耀找，通過link標(biāo)簽中的media屬性來指定不同的媒體類型翔悠。如下所示。@import方法@import可以引用樣式文件野芒，同樣也可以用來引用媒體類型蓄愁。@import引入媒體類型主要有兩種方式，一種是在樣式中通過@import調(diào)用另一個樣式文件狞悲；另一種方法是在標(biāo)簽中的中引入撮抓，但這種使用方法在IE6~7都不被支持，如樣式文件中調(diào)用另一個樣式文件時摇锋，就可以指定對應(yīng)的媒體類型丹拯。@importurl(reset.css) screen;?? @importurl(print.css) print;在@media方法@media是CSS3中新引進(jìn)的一個特性，被稱為媒體查詢荸恕。在頁面中也可以通過這個屬性來引入媒體類型咽笼。@media引入媒體類型和@import有點(diǎn)類似也具有兩方式。

（1）在樣式文件中引用媒體類型：@media screen {?? 選擇器{/*你的樣式代碼寫在這里…*/}}（2）使用@media引入媒體類型的方式是在

Media Queries使用方法了解完這些概念性的東西戚炫，同學(xué)們最想知道的是Media Queries要如何使用剑刑？下面我們一起來探討其使用方法：

Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端設(shè)備下達(dá)到不同的渲染效果双肤。前面簡單的介紹了Media Queries如何引用到項(xiàng)目中施掏，但Media Queries有其自己的使用規(guī)則。具體來說,Media Queries的使用方法如下茅糜。@media 媒體類型and （媒體特性）{你的樣式}注意：使用Media Queries必須要使用“@media”開頭七芭，然后指定媒體類型（也可以稱為設(shè)備類型），隨后是指定媒體特性（也可以稱之為設(shè)備特性）蔑赘。媒體特性的書寫方式和樣式的書寫方式非常相似狸驳，主要分為兩個部分，第一個部分指的是媒體特性缩赛，第二部分為媒體特性所指定的值耙箍，而且這兩個部分之間使用冒號分隔。例如：(max-width: 480px)從前面表中可以得知酥馍，主要有十種媒體類型和13種媒體特性辩昆，將其組合就類似于不同的CSS集合。但與CSS屬性不同的是旨袒，媒體特性是通過min/max來表示大于等于或小于做為邏輯判斷汁针，而不是使用小于（<）和大于（>）這樣的符號來判斷术辐。接下來一起來看看Media Queries在實(shí)際項(xiàng)目中常用的方式。1. 最大寬度max-width“max-width”是媒體特性中最常用的一個特性施无，其意思是指媒體類型小于或等于指定的寬度時辉词，樣式生效。如：@media screen and (max-width:480px){ .ads {?? display:none;? }}上面表示的是：當(dāng)屏幕小于或等于480px時,頁面中的廣告區(qū)塊（.ads）都將被隱藏猾骡。2.最小寬度min-width“min-width”與“max-width”相反瑞躺，指的是媒體類型大于或等于指定寬度時，樣式生效卓练。@media screen and (min-width:900px){.wrapper{width: 980px;}}上面表示的是：當(dāng)屏幕大于或等于900px時隘蝎，容器“.wrapper”的寬度為980px购啄。3.多個媒體特性使用Media Queries可以使用關(guān)鍵詞"and"將多個媒體特性結(jié)合在一起襟企。也就是說，一個Media Query中可以包含0到多個表達(dá)式狮含，表達(dá)式又可以包含0到多個關(guān)鍵字顽悼，以及一種媒體類型。當(dāng)屏幕在600px~900px之間時几迄，body的背景色渲染為“#f5f5f5”蔚龙，如下所示。@media screen and (min-width:600px) and (max-width:900px){? body {background-color:#f5f5f5;}}4.設(shè)備屏幕的輸出寬度Device Width在智能設(shè)備上映胁，例如iPhone木羹、iPad等，還可以根據(jù)屏幕設(shè)備的尺寸來設(shè)置相應(yīng)的樣式（或者調(diào)用相應(yīng)的樣式文件）解孙。同樣的坑填，對于屏幕設(shè)備同樣可以使用“min/max”對應(yīng)參數(shù)，如“min-device-width”或者“max-device-width”弛姜。上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px脐瑰，比如說iPhone上的顯示，這里的“max-device-width”所指的是設(shè)備的實(shí)際分辨率廷臼，也就是指可視面積分辨率苍在。5. not關(guān)鍵詞使用關(guān)鍵詞“not”是用來排除某種制定的媒體類型，也就是用來排除符合表達(dá)式的設(shè)備荠商。換句話說寂恬，not關(guān)鍵詞表示對后面的表達(dá)式執(zhí)行取反操作，如：@media not print and (max-width: 1200px){樣式代碼}上面代碼表示的是：樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中莱没。6.only關(guān)鍵詞only用來指定某種特定的媒體類型掠剑，可以用來排除不支持媒體查詢的瀏覽器。其實(shí)only很多時候是用來對那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的郊愧。其主要有：支持媒體特性的設(shè)備朴译，正常調(diào)用樣式井佑，此時就當(dāng)only不存在；表示不支持媒體特性但又支持媒體類型的設(shè)備眠寿，這樣就會不讀樣式躬翁，因?yàn)槠湎葧x取only而不是screen；另外不支持Media Queries的瀏覽器盯拱，不論是否支持only盒发，樣式都不會被采用。如在Media Query中如果沒有明確指定Media Type狡逢，那么其默認(rèn)為all宁舰，如：另外在樣式中，還可以使用多條語句來將同一個樣式應(yīng)用于不同的媒體類型和媒體特性中奢浑，指定方式如下所示蛮艰。上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上，或者被用于屏幕寬度大于或等于960px的設(shè)備上雀彼。

到目前為止壤蚜，CSS3 Media Queries得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支持之外，在所有現(xiàn)代瀏覽器中都可以完美支持。還有一個與眾不同的時横堡，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。

Responsive設(shè)計(jì)（一）

什么是響應(yīng)式設(shè)計(jì)呢著蟹？維基百科是這樣對響應(yīng)式作的描述：“Responsive設(shè)計(jì)簡單的稱為RWD，是精心提供各種設(shè)備都能瀏覽網(wǎng)頁的一種設(shè)計(jì)方法梢莽，RWD能讓你的網(wǎng)頁在不同的設(shè)備中展現(xiàn)不同的設(shè)計(jì)風(fēng)格萧豆。”從這一點(diǎn)描述來說蟹漓，RWD不是流體布局炕横，也不是網(wǎng)格布局，而是一種獨(dú)特的網(wǎng)頁設(shè)計(jì)方法葡粒。響應(yīng)式設(shè)計(jì)要考慮元素布局的秩序份殿，而且還需要做到“有求必應(yīng)”，那就需要滿足以下三個條件：網(wǎng)站必須建立靈活的網(wǎng)格基礎(chǔ)嗽交；引用到網(wǎng)站的圖片必須是可伸縮的卿嘲；不同的顯示風(fēng)格，需要在Media Queries上寫不同的樣式夫壁。要想靈活的使用Responsive拾枣，僅滿足這幾個條件還是不夠的，我們必須對Responsive有一個全面的了解，那么要了解Responsive梅肤，就得先了解他的一些術(shù)語：1.流體網(wǎng)格流體網(wǎng)格是一個簡單的網(wǎng)格系統(tǒng)司蔬，這種網(wǎng)格設(shè)計(jì)參考了流體設(shè)計(jì)中的網(wǎng)格系統(tǒng)，將每個網(wǎng)格格子使用百分比單位來控制網(wǎng)格大小姨蝴。這種網(wǎng)格系統(tǒng)最大的好處是讓你的網(wǎng)格大小隨時根據(jù)屏幕尺寸大小做出相對應(yīng)的比例縮放俊啼。2.彈性圖片彈性圖片指的是不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)格進(jìn)行縮放左医，用于適應(yīng)各種網(wǎng)格的尺寸授帕。而實(shí)現(xiàn)方法是比較簡單，一句代碼就能搞定的事情浮梢。img {max-width:100%;}不幸的是跛十，這句代碼在IE8瀏覽器存在一個嚴(yán)重的問題，讓你的圖片會失蹤秕硝。當(dāng)然彈性圖片在響應(yīng)式設(shè)計(jì)中如何更好的實(shí)現(xiàn)芥映，到目前為止都還存在爭議，也還在不斷的改善之中缝裤。為每一個斷點(diǎn)提供不同的圖片屏轰，這是一個比較頭痛的事情颊郎，因?yàn)镸edia Queries并不能改變圖片“src”的屬性值憋飞，那有沒有辦分法可以解決呢？可以參考一下下面的解決方法姆吭。使用background-image給元素使用背景圖片榛做，顯示/隱藏父元素，給父元素使用不同的圖片内狸，然后通過Media Queries來控制這些圖片顯示或隱藏检眯。來看一個斷點(diǎn)解決圖片自適應(yīng)的例子。

對應(yīng)的CSS代碼：@media (min-device-width:600px){img[data-src-600px]{? content: attr(data-src-600px,url);? }}@media (min-device-width:800px){? img[data-src-800px] {? content:attr(data-src-800px,url);? }} 請注意：這僅僅是解決響應(yīng)式圖片自適應(yīng)的一種思路昆淡，但這種方案僅僅適配的斷點(diǎn)較少锰瘸。并不太實(shí)用，此處僅為擴(kuò)展同學(xué)們的思路昂灵。3.媒體查詢媒體查詢在CSS3中得到了強(qiáng)大的擴(kuò)展避凝。使用這個屬性可以讓你的設(shè)計(jì)根據(jù)用戶終端設(shè)備適配對應(yīng)的樣式。這也是響應(yīng)式設(shè)計(jì)中最為關(guān)鍵的眨补」芟鳎可以說Responsive設(shè)計(jì)離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢可以根據(jù)設(shè)備的尺寸撑螺，查詢出適配的樣式含思。Responsive設(shè)計(jì)最關(guān)注的就是：根據(jù)用戶的使用設(shè)備的當(dāng)前寬度，你的Web頁面將加載一個備用的樣式，實(shí)現(xiàn)特定的頁面風(fēng)格含潘。任務(wù)

4.屏幕分辨率text-shadow: 0 1px 1px #fff

屏幕分辨簡單點(diǎn)說就是用戶顯示器的分辨率饲做，深一點(diǎn)說，屏幕分辨率指的是用戶使用的設(shè)備瀏覽您的Web頁面時的顯示屏幕的分辨率遏弱，比如說智能手機(jī)瀏覽器艇炎、移動電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率腾窝。Responsive設(shè)計(jì)利用Media Queries屬性針對瀏覽器使用的分辨率來適配對應(yīng)的CSS樣式缀踪。因此屏幕分辨率在Responsive設(shè)計(jì)中是一個很重要的東西，因?yàn)橹挥兄繵eb頁面要在哪種分辨率下顯示何種效果虹脯，才能調(diào)用對應(yīng)的樣式驴娃。

5.主要斷點(diǎn)

主要斷點(diǎn)，在Web開發(fā)中是一個新詞循集，但對于Responsive設(shè)計(jì)中是一個很重要的一部分唇敞。簡單的描述就是，設(shè)備寬度的臨界點(diǎn)咒彤。在Media Queries中疆柔，其中媒體特性“min-width”和“max-width”對應(yīng)的屬性值就是響應(yīng)式設(shè)計(jì)中的斷點(diǎn)值。簡單點(diǎn)說镶柱，就是使用主要斷點(diǎn)和次要斷點(diǎn)旷档，創(chuàng)建媒體查詢的條件。而每個斷點(diǎn)會對應(yīng)調(diào)用一個樣式文件（或者樣式代碼）

綜合下來歇拆，設(shè)置斷點(diǎn)應(yīng)把握三個要點(diǎn)：滿足主要的斷點(diǎn)鞋屈；有可能的話添加一些別的斷點(diǎn)；設(shè)置高于1024的桌面斷點(diǎn)

Responsive布局技巧

通過上面的介紹故觅，大家對響應(yīng)式設(shè)計(jì)有了一定的了解厂庇，但在實(shí)際制作中還是有一些布局技巧的：

在Responsive布局中，可以毫無保留的丟棄：

第一输吏， 盡量少用無關(guān)緊要的div权旷；

第二，不要使用內(nèi)聯(lián)元素（inline）贯溅；

第三拄氯，盡量少用JS或flash；

第四盗迟，丟棄沒用的絕對定位和浮動樣式坤邪；

第五，摒棄任何冗余結(jié)構(gòu)和不使用100%設(shè)置罚缕。

有舍才有得艇纺，丟棄了一些對Responsive有影響的東東，那么有哪些東東能幫助Responsive確定更好的布局呢？

第一黔衡，使用HTML5 Doctype和相關(guān)指南蚓聘；

第二，重置好你的樣式（reset.css）盟劫；

第三夜牡，一個簡單的有語義的核心布局；

第四侣签，給重要的網(wǎng)頁元素使用簡單的技巧塘装，比如導(dǎo)航菜單之類元素。

Responsive設(shè)計(jì)——meta標(biāo)簽最后還有一個不可或缺的東東影所，那就是meta標(biāo)簽蹦肴，可以說，在響應(yīng)式設(shè)計(jì)中如果沒有這個meta標(biāo)簽猴娩，你就是蹩腳的阴幌，響應(yīng)式設(shè)計(jì)就是空談。個meta標(biāo)簽被稱為可視區(qū)域meta標(biāo)簽卷中，其使用方法如下矛双。在content屬性中主要包括以下屬性值，用來處理可視區(qū)域蟆豫。在實(shí)際項(xiàng)目中议忽，為了讓Responsive設(shè)計(jì)在智能設(shè)備中能顯示正常，也就是瀏覽Web頁面適應(yīng)屏幕的大小无埃，顯示在屏幕上徙瓶，可以通過這個可視區(qū)域的meta標(biāo)簽進(jìn)行重置毛雇，告訴他使用設(shè)備的寬度為視圖的寬度嫉称，也就是說禁止其默認(rèn)的自適應(yīng)頁面的效果，具體設(shè)置如下：另外一點(diǎn)灵疮，由于Responsive設(shè)計(jì)是結(jié)合CSS3的Media Queries屬性织阅，才能盡顯Responsive設(shè)計(jì)風(fēng)格，但大家都清楚震捣，在IE6-8中完全是不支持CSS3 Media荔棉。下面我們一起來看看CSS3 Meida Queries在標(biāo)準(zhǔn)設(shè)備上的運(yùn)用，大家可以把這些樣式加到你的樣式文件中蒿赢，或者單獨(dú)創(chuàng)建一個名為“responsive.css”文件润樱，并在相應(yīng)的條件中寫上你的樣式，讓他適合你的設(shè)計(jì)需求羡棵。腳本下載地址： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)? ? ?? respond.js(https://github.com/scottjehl/Respond)?

Responsive設(shè)計(jì)——不同設(shè)備的分辨率設(shè)置

下面我們一起來看看CSS3 Meida Queries在標(biāo)準(zhǔn)設(shè)備上的運(yùn)用壹若，大家可以把這些樣式加到你的樣式文件中，或者單獨(dú)創(chuàng)建一個名為“responsive.css”文件，并在相應(yīng)的條件中寫上你的樣式店展，讓他適合你的設(shè)計(jì)需求：

1.1024px顯屏

@media screen and (max-width : 1024px) {

/* 樣式寫在這里 */

}

2.800px顯屏

@media screen and (max-width : 800px) {

/* 樣式寫在這里 */

}

3.640px顯屏

@media screen and (max-width : 640px) {

/* 樣式寫在這*/

}

4.iPad橫板顯屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {

/* 樣式寫在這 */

}

5.iPad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {

/* 樣式寫在這 */

}

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {

/* 樣式寫在這 */

}

現(xiàn)在有關(guān)于這方面的運(yùn)用也是相當(dāng)?shù)某墒煅ǎ瑃witter的Bootstrap第二版本中就加上了這方面的運(yùn)用。大家可以對比一下：

@media (max-width: 480px) { ... }

@media (max-width: 768px) { ... }

@media (min-width: 768px) and (max-width: 980px) { ... }

@media (min-width: 1200px) { .. }

文本

font －size：length／percentage／absolute size／

px赂蕴；2em柳弄，200%有參照物！參照氟元素

font－family：

font －weight：normal bold

font－style normal italic oblique

段落：

line height：normal number length percentage 3em

font：［font-style]||font-variant||font-weight||font-size||line-height||font-family||

font：italic bold 20px/1.5 serif概说；

text－align：left／right／center／justify

vertical－align：垂直對齊：baseline|sub下標(biāo)|sup上標(biāo)|top|middle垂直居中|bottom|text-bottom|percentage|length;－－可以是text也可是圖片

首行縮進(jìn)：text－indent：length｜percentage

em是以文字大小為參照碧注！

white-space:換行normal一行顯示|nowrap不要換行強(qiáng)制一行|pre換行保留住|pre-wrap超出換行|pre-line自動換行;

word－wrap：normal｜break word超出的單詞自動換行

work－break：normal｜keep－all｜bleak—all任意兩個字符換行

text-shadow:none|length{2-3}&&color]#

text-shadow:1px --x 2px--y偏移偏移 3px 模糊半徑 #f00；不寫color是文字的顏色

text-decoration:none|uderline|overline|line-through;

text-decoration:underline overline;

高級設(shè)置：

...---text-overflow;

text-overflow:clip|ellipsis文本溢出糖赔；

overflow：hidden应闯；

white－space：nowrap

cursor:auto|default|help|pointer|zoom-in|zoom-out|move

盒子模型：

盒子內(nèi)容content，盒子填充padding挂捻，盒子邊框border碉纺，盒子外邊距margin

width：length｜百分百｜auto自動分配width

max-width|min-width;

padding:{1,4};順時針

border-radius:length|percentage|{1,4}

overflow:visible|hidden|scroll|auto;

box-sizing:content-box|border-box; 做自適應(yīng)的布局

設(shè)置width，height指定區(qū)域

box-shadow:none|shadow length inset color;

box-shadow:4px 水平偏移 0px垂直偏移 0px 模糊半徑 0px陰影大小 red;

box-shadow:外陰影 3px 3px 5px 2x;

內(nèi)陰影 inset 0px 0px 5px red;

多陰影：3px 3px 5px 3px,3px 4px 5px 4px #000;

陰影不占空間的刻撒！

outline：outline width｜outline-style|outline-color;輪廓和邊框一樣骨田，它不占空間她在border以外！

2d變形：transfrom

transform:rotate(deg)盒子旋轉(zhuǎn)多少度声怔！

transform:none|transform-function+一個或多個方法順序不同結(jié)果不同;

rotate(angle):旋轉(zhuǎn)角度

translate：移動（x偏移态贤，y的偏移）；==position 中l(wèi)eft醋火，top 20%是盒子寬度和高度做參照物悠汽！

scale(number，number)縮放

skew(angle)傾斜多少度在x偏移多少度

transform-origin:參照位置left芥驳，right柿冲，top，bottom兆旬，percentage｜length假抄；偏移

何一個元素都有一個中心點(diǎn)，默認(rèn)情況之下丽猬，其中心點(diǎn)是居于元素X軸和Y軸的50%處宿饱。如下圖所示：

在沒有重置transform-origin改變元素原點(diǎn)位置的情況下，CSS變形進(jìn)行的旋轉(zhuǎn)脚祟、位移谬以、縮放，扭曲等操作都是以元素自己中心位置進(jìn)行變形由桌。但很多時候为黎，我們可以通過transform-origin來對元素進(jìn)行原點(diǎn)位置改變胡陪，使元素原點(diǎn)不在元素的中心位置，以達(dá)到需要的原點(diǎn)位置碍舍。transform-origin取值和元素設(shè)置背景中的background-position取值類似柠座，如下表所示：示例展示：通過transform-origin改變元素原點(diǎn)到左上角，然后進(jìn)行順時旋轉(zhuǎn)45度片橡。HTML代碼：

原點(diǎn)在默認(rèn)位置處

原點(diǎn)重置到左上角

CSS代碼：.wrapper {? width: 300px;? height: 300px;? float: left;? margin: 100px;? border: 2px dotted red;? line-height: 300px;? text-align: center;}.wrapper div {? background: orange;? -webkit-transform: rotate(45deg);? transform: rotate(45deg);}.transform-origin div {? -webkit-transform-origin: left top;? transform-origin: left top;}演示結(jié)果：

3d變形：

perspective：透視效果none｜length妈经；越大透視月不明顯，越小透視效果明顯

perspective-origin:left|right|top|bottom|length|percentage|透視的角度

perspective-origin:50% 50%

translate3d()多了z軸translatex()translatey()translatez();

transform:translata3d(10px ,20%,50px);scale3d(),z不會影響盒子??

rorate3d()

動畫

transition-property:none|多個屬性｜all｜某個屬性值它的動畫要借助hover

這個偽類

動畫--過渡屬性 transition-property早期在Web中要實(shí)現(xiàn)動畫效果捧书，都是依賴于JavaScript或Flash來完成吹泡。但在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的CSS事件來觸發(fā)元素的外觀變化经瓷，讓效果顯得更加細(xì)膩爆哑。簡單點(diǎn)說，就是通過鼠標(biāo)的單擊舆吮、獲得焦點(diǎn)揭朝，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動畫效果改變CSS的屬性值色冀。

在CSS中創(chuàng)建簡單的過渡效果可以從以下幾個步驟來實(shí)現(xiàn)：第一潭袱，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式；第二锋恬，聲明過渡元素最終狀態(tài)樣式屯换，比如懸浮狀態(tài)；第三与学，在默認(rèn)樣式中通過添加過渡函數(shù)彤悔，添加一些不同的樣式。CSS3的過度transition屬性是一個復(fù)合屬性索守，主要包括以下幾個子屬性：transition-property:指定過渡或動態(tài)模擬的CSS屬性

transition-duration:指定完成過渡所需的時間

transition-timing-function:指定過渡函數(shù)

transition-delay:指定開始出現(xiàn)的延遲時間先來看

transition-property屬性transition-property用來指定過渡動畫的CSS屬性名稱晕窑，而這個過渡屬性只有具備一個中點(diǎn)值的屬性（需要產(chǎn)生動畫的屬性）才能具備過渡效果，其對應(yīng)具有過渡的CSS屬性主要有：HTML:

background-color, background-position; border;clip;color;font-size;font-weight;line-height; opacity;word-spacing; text-indent;text-shadow;padding;

width;visibility;z-index;

CSS:div {? width: 200px;? height: 200px;? background-color:red;? margin: 20px auto;? -webkit-transition: background-color .5s ease .1s;? transition: background-color .5s ease .1s;}

div:hover {? background-color: orange;}演示結(jié)果:鼠標(biāo)移入

transition-duration:設(shè)置執(zhí)行動畫的時間

transition-timing-function:ease|linear|ease-out|ease-in-out|cubic-bezier;

step-start|step-end;是否在開始變化還是結(jié)束變化

transition-timing-function:ease;

transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);

transition-timing-function:linear;

transition-timing-function:ease,linear;

.box{

width:600px;height:100px;outline: 2px dashed;margin: 20 auto;background: #f00;}

.box pre{width:100px;height:100px;border-radius:50%;padding: 0;line-height: 100px;text-align: center;font-size: 20px;color: #fff;background:green;transition:2s;position: relative;left: 0;}

.box:hover pre{left: 500px;color: #000;}

.n1 pre{ transition-property:none;}

.n2 pre{ transition-property:all;}

.n3 pre{ transition-property:left}

.n4 pre{ transition-property:left,color;padding: 20px 0;line-height: 30px;}

.n5 pre{ transition-property:right;}

2css3中的變形與動畫

Keyframes介紹

Keyframes被稱為關(guān)鍵幀蕾盯，其類似于Flash中的關(guān)鍵幀幕屹。在CSS3中其主要以“@keyframes”開頭，后面緊跟著是動畫名稱加上一對花括號“{…}”级遭，括號中就是一些不同時間段樣式規(guī)則。

@keyframes changecolor{

0%{

background: red;

}

100%{

background: green;

}

一個“@keyframes”中的樣式規(guī)則可以由多個百分比構(gòu)成的渺尘，如在“0%”到“100%”之間創(chuàng)建更多個百分比挫鸽，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達(dá)到一種在不斷變化的效果鸥跟。

經(jīng)驗(yàn)與技巧：在@keyframes中定義動畫名稱時丢郊，其中0%和100%還可以使用關(guān)鍵詞from和to來代表盔沫，其中0%對應(yīng)的是from，100%對應(yīng)的是to枫匾。

chrome和safari需要加－webkit－架诞；

調(diào)用動畫

animation-name屬性主要是用來調(diào)用 @keyframes 定義好的動畫。需要特別注意: animation-name 調(diào)用的動畫名需要和“@keyframes”定義的動畫名稱完全一致（區(qū)分大小寫）干茉，如果不一致將不具有任何動畫效果谴忧。

語法：

animation-name: none | IDENT[,none|DENT]*;

1、IDENT是由 @keyframes 創(chuàng)建的動畫名角虫，上面已經(jīng)講過了（animation-name 調(diào)用的動畫名需要和“@keyframes”定義的動畫名稱完全一致）沾谓；

2、none為默認(rèn)值戳鹅，當(dāng)值為 none 時均驶，將沒有任何動畫效果,這可以用于覆蓋任何動畫。

注意：需要在 Chrome 和 Safari 上面的基礎(chǔ)上加上-webkit-前綴枫虏，F(xiàn)irefox加上-moz-妇穴。

置動畫播放時間animation-duration主要用來設(shè)置CSS3動畫播放時間，其使用方法和transition-duration類似隶债，是用來指定元素播放動畫所持續(xù)的時間長伟骨，也就是完成從0%到100%一次動畫所需時間。單位：S秒語法規(guī)則animation-duration:[,]*取值為數(shù)值燃异，單位為秒携狭，其默認(rèn)值為“0”，這意味著動畫周期為“0”回俐，也就是沒有動畫效果（如果值為負(fù)值會被視為“0”）逛腿。

設(shè)置動畫播放方式animation-timing-function屬性主要用來設(shè)置動畫播放方式。主要讓元素根據(jù)時間的推進(jìn)來改變屬性值的變換速率仅颇，簡單點(diǎn)說就是動畫的播放方式单默。語法規(guī)則：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,)]*

它和transition中的transition-timing-function一樣，具有以下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier忘瓦。對應(yīng)功如下：

在調(diào)用move動畫播放中搁廓，讓元素樣式從初始狀態(tài)到終止?fàn)顟B(tài)時，先加速再減速耕皮，也就是漸顯漸隱效果境蜕。

設(shè)置動畫播放次數(shù)animation-iteration-count屬性主要用來定義動畫的播放次數(shù)。語法規(guī)則：animation-iteration-count: infinite |[, infinite |]*

1凌停、其值通常為整數(shù)粱年，但也可以使用帶有小數(shù)的數(shù)字，其默認(rèn)值為1罚拟，這意味著動畫將從開始到結(jié)束只播放一次台诗。

2完箩、如果取值為infinite，動畫將會無限次的播放拉队。

舉例：

通過animation-iteration-count屬性讓動畫move只播放5次弊知，代碼設(shè)置為：

animation-iteration-count:5;

注意：Chrome或Safari瀏覽器，需要加入-webkit-前綴粱快！

置動畫播放方向

animation-direction屬性主要用來設(shè)置動畫播放方向秩彤，其語法規(guī)則如下：

animation-direction:normal | alternate [, normal | alternate]*

其主要有兩個值：normal、alternate

1皆尔、normal是默認(rèn)值呐舔，如果設(shè)置為normal時，動畫的每次循環(huán)都是向前播放慷蠕；

2珊拼、另一個值是alternate，他的作用是流炕，動畫播放在第偶數(shù)次向前播放澎现，第奇數(shù)次向反方向播放。

例如：通過animation-direction屬性每辟，將move動畫播放動畫方向設(shè)置為alternate剑辫，代碼為：

animation-direction:alternate;

注意：Chrome或Safari瀏覽器，需要加入-webkit-前綴渠欺！

設(shè)置動畫的播放狀態(tài)

animation-play-state屬性主要用來控制元素動畫的播放狀態(tài)妹蔽。

參數(shù)：

其主要有兩個值：running和paused。

其中running是其默認(rèn)值挠将，主要作用就是類似于音樂播放器一樣胳岂，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放舔稀，這里的重新播放不一定是從元素動畫的開始播放乳丰，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放内贮，元素的樣式將回到最原始設(shè)置狀態(tài)产园。

例如，頁面加載時夜郁，動畫不播放什燕。代碼如下：

animation-play-state:paused;

設(shè)置動畫時間外屬性

animation-fill-mode屬性定義在動畫開始之前和結(jié)束之后發(fā)生的操作。主要具有四個屬性值：none拂酣、forwards秋冰、backwords和both。其四個屬性值對應(yīng)效果如下：

屬性值

效果

none

默認(rèn)值婶熬，表示動畫將按預(yù)期進(jìn)行和結(jié)束剑勾，在動畫完成其最后一幀時，動畫會反轉(zhuǎn)到初始幀處

forwards

表示動畫在結(jié)束后繼續(xù)應(yīng)用最后的關(guān)鍵幀的位置

backwards

會在向元素應(yīng)用動畫樣式時迅速應(yīng)用動畫的初始幀

both

元素動畫同時具有forwards和backwards效果

在默認(rèn)情況之下赵颅，動畫不會影響它的關(guān)鍵幀之外的屬性虽另，使用animation-fill-mode屬性可以修改動畫的默認(rèn)行為。簡單的說就是告訴動畫在第一關(guān)鍵幀上等待動畫開始饺谬，或者在動畫結(jié)束時停在最后一個關(guān)鍵幀上而不回到動畫的第一幀上捂刺。或者同時具有這兩個效果募寨。

例如：讓動畫停在最一幀處族展。代碼如下：

animation-fill-mode:forwards;