CSS3 過(guò)渡
多年來(lái)， Web前端開(kāi)發(fā)人員一直在尋求通過(guò)HTML和CSS實(shí)現(xiàn)一些動(dòng)畫(huà)交互效果， 而不再使用JavaScript 或Flash。 現(xiàn)在他們的愿望實(shí)現(xiàn)了。 CSS3除了給我們帶來(lái)前面介紹的一些 特殊功能模塊之外， 還為Web設(shè)計(jì)師添加了 一些動(dòng)畫(huà)功能模塊。 可以通過(guò):hover、:focus、:active、:checked 或者JavaScript 觸發(fā)一個(gè)元素，這樣，外觀變化會(huì)顯得更細(xì)膩，而不會(huì)讓人感覺(jué)“ 一觸即發(fā)”。例如懸浮修改鏈接色，在 CSS2.1中鼠標(biāo)懸浮時(shí)， 立刻從一個(gè)顏色變成另一個(gè)顏色。 而在CSS3 中使用過(guò)渡功能， 鼠標(biāo)懸浮時(shí)， 顏色在一定的時(shí)間內(nèi)， 從一個(gè)顏色過(guò)渡到另一個(gè) 顏色，給用戶更好、 更細(xì)膩的體驗(yàn)。
CSS3的過(guò)渡功能像是一種黃油， 通過(guò)一些CSS的簡(jiǎn)單動(dòng)作觸發(fā)樣式平滑過(guò)渡。W3C標(biāo)準(zhǔn)中描述的transition功能很簡(jiǎn)單： CSS3的transition允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動(dòng)畫(huà)效果改變CSS的屬性值。
以往Web中的動(dòng)畫(huà)都是依賴(lài)于JavaScript和Flash實(shí)現(xiàn)，但原生CSS過(guò)渡在客戶端上需要處理的資源少得多，從而顯得更加平滑。 CSS3過(guò)渡與元素上的常規(guī)樣式一起聲明。只要目標(biāo)屬性更改，瀏覽器 就會(huì)應(yīng)用過(guò)渡。除了使用JavaScript 觸發(fā)動(dòng)作外，在CSS中也可以通過(guò)一些偽類(lèi)來(lái)觸發(fā)， 如 :hover、:focus、:active、:target 和:checked等。 這很重要：無(wú)須在JavaScript中編寫(xiě)動(dòng)畫(huà)，只需要更改一個(gè)屬性值并依賴(lài)瀏覽器來(lái)執(zhí)行所有重要工作。 以下 是使用CSS創(chuàng)建簡(jiǎn)單過(guò)渡的步驟：
http:/ /www.iis7.com/b/wzjk/
1). 在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式。
2). 聲明過(guò)渡元素最終狀態(tài)樣式， 比如懸浮狀態(tài)。
3). 在默認(rèn)樣式中通過(guò)添加過(guò)渡函數(shù)， 添加一些不同的樣式。
transition屬性是一個(gè)復(fù)合屬性，出于簡(jiǎn)潔性和便于維護(hù)考慮，過(guò)渡語(yǔ)法通常以簡(jiǎn)化的形式表達(dá)。
transition屬性主要包含四個(gè)屬性值：
·transition-property： 指定過(guò)渡或動(dòng)態(tài)模擬的CSS屬性。
·transition-duration： 指定完成過(guò)渡所需的時(shí)間。
·transition-timing-function： 指定過(guò)渡函數(shù)。
·transition-delay： 指定過(guò)渡開(kāi)始出現(xiàn)的延遲時(shí)間。
指定過(guò)渡函數(shù) transition-timing-function，transition- timing- function屬性指定某種指代過(guò)渡“ 緩動(dòng)函數(shù)”的屬性。此屬性可指定瀏覽器的過(guò)渡速度， 以及過(guò)渡期間的操作進(jìn)展情況， 可以將某個(gè)值指定為預(yù)定義函數(shù)、階梯函數(shù)或者三次貝塞爾曲線。
到目前為止，看到的ease、linear、ease-in、ease-out和ease-in-out等曲線函數(shù)非常一般，用于過(guò)渡動(dòng)畫(huà)中也不是十分精確。而現(xiàn)在制作一些動(dòng)畫(huà)需求越來(lái)越精確，需要定義一些更精確的函數(shù)。
CSS3 的transition中， 定義三次貝塞爾曲線的語(yǔ)法如右所示： cubic-bezier( P0, P1, P2, P3)
一個(gè)三次貝塞爾曲線由四個(gè)點(diǎn)控制曲線形狀。每個(gè)點(diǎn)由水平和垂直兩個(gè)值來(lái)確定， 也就是常說(shuō)的由X和Y值確定。
這些點(diǎn)的值是小數(shù)或者百分比， 不過(guò)很少看到使用百分比來(lái)設(shè)置一個(gè)三次貝塞爾曲線點(diǎn)。而且它們的值都是一個(gè)0～1的小數(shù)。 不過(guò)有一點(diǎn)需要特別注意， 三次貝塞爾曲線中的P0和P兩個(gè)點(diǎn)是無(wú)法設(shè)置的， 因?yàn)樗鼈兛偸谴嬖贖TML中， 也就是說(shuō)它們總會(huì)是（ 0，0）和（ 1，1）。
注意，三次貝塞爾曲線中的每個(gè)點(diǎn)值只允許0～1的值。
step()函數(shù)，step()函數(shù)用于把整個(gè)操作領(lǐng)域劃成同樣大小的間隔， 每個(gè)間隔都是都是相等的。 該函數(shù)還指定發(fā)生在開(kāi)始或結(jié)束的時(shí)間間隔是否另外輸出百分比（換句話說(shuō)，如果輸出的百分比為0%表示輸入變化的初始點(diǎn)）。
step() 函數(shù)非常獨(dú)特，它允許在固定的間隔播放動(dòng)畫(huà)。例如， 在 step() 函數(shù)圖上可以看出， 動(dòng)畫(huà)屬性比在0%處開(kāi)始，漲到50%，動(dòng)畫(huà)結(jié)束時(shí)， 屬性值達(dá)到100%（ 也就是結(jié)束狀態(tài)屬性）。 并且在各個(gè)step() 函數(shù)中每個(gè)步驟在過(guò)渡動(dòng)畫(huà)中不夠平滑
step(< integer>[,[ start| end]]?) step() 函數(shù)主要包括兩個(gè)參數(shù)。
·第一個(gè)參數(shù)是一個(gè)數(shù)值< integer>， 主要用來(lái)指定step()函數(shù)間隔的數(shù)量， 此值必須是一個(gè)大于0的正整數(shù)。
·第二個(gè)參數(shù)是可選的， 是start或end， 如果第二個(gè)參數(shù)忽略， 則默認(rèn)為end值。 其中step( 1, start)相當(dāng)于step- start； step( 1, end)相當(dāng)于step- end。
偽元素觸發(fā)
使用transition 時(shí)， 常用鼠標(biāo)懸?。? hover） 來(lái)觸發(fā)過(guò)渡。
為說(shuō)明這與觸發(fā)過(guò)渡的實(shí)際事件毫無(wú)關(guān)聯(lián)， 也為強(qiáng)調(diào)狀態(tài)變化的重要性， 下面提供了 一些觸發(fā)過(guò)渡的其他方法。

專(zhuān)注于為中小企業(yè)提供網(wǎng)站制作、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)當(dāng)雄免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1. 使用:active “:active”偽類(lèi)表示用戶單擊某個(gè)元素并按住鼠標(biāo)按鈕時(shí)顯示的狀態(tài)。
2. 使用:focus“:focus”偽類(lèi)通常會(huì)在元素接收鍵盤(pán)焦點(diǎn)時(shí)出現(xiàn)。文本輸入框元素上將發(fā)生過(guò)渡， 且該元素得到焦點(diǎn)時(shí)會(huì)執(zhí)行文本輸入框元素寬度和背景色過(guò)渡。
   此處作為一個(gè)邊點(diǎn)， 當(dāng)對(duì)“: hover”偽類(lèi)應(yīng)用過(guò)渡時(shí)， 最好將“: focus”添加到選擇器堆棧。 這樣將能夠豐富鼠標(biāo)用戶和鍵盤(pán)用戶的體驗(yàn)。
3. 使用:checked “:checked”偽類(lèi)在發(fā)生以下?tīng)顩r時(shí)觸發(fā)過(guò)渡。 文本框選中時(shí)，
4. 媒體查詢(xún)觸發(fā) 觸發(fā)元素狀態(tài)變化的另一種方法是使用CSS3媒體查詢(xún)（ Media Queries）。
5. JavaScript 觸發(fā) 如果可以基于CSS的狀態(tài)更改觸發(fā)過(guò)渡， 自然可以通過(guò) JavaScript做到這一點(diǎn)。
   隱式過(guò)渡 “隱式過(guò)渡”指的是當(dāng)一個(gè)屬性改變時(shí)引起另一個(gè)屬性到一個(gè)屬性的過(guò)渡。

當(dāng)前標(biāo)題：CSS3過(guò)渡屬性
文章URL：http://chinadenli.net/article36/jgjosg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、定制開(kāi)發(fā)、網(wǎng)站收錄、網(wǎng)頁(yè)設(shè)計(jì)公司、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)