這篇文章給大家分享的是有關(guān)CSS3中如何實現(xiàn)過渡的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)是一家以重慶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、品牌設(shè)計、軟件運維、seo優(yōu)化、小程序App開發(fā)等移動開發(fā)為一體互聯(lián)網(wǎng)公司。已累計為不銹鋼雕塑等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

CSS3 過渡

多年來， Web前端開發(fā)人員一直在尋求通過HTML和CSS實現(xiàn)一些動畫交互效果， 而不再使用JavaScript 或Flash。 現(xiàn)在他們的愿望實現(xiàn)了。 CSS3除了給我們帶來前面介紹的一些 特殊功能模塊之外， 還為Web設(shè)計師添加了 一些動畫功能模塊。 可以通過:hover、:focus、:active、:checked 或者JavaScript 觸發(fā)一個元素，這樣，外觀變化會顯得更細(xì)膩，而不會讓人感覺“ 一觸即發(fā)”。例如懸浮修改鏈接色，在 CSS2.1中鼠標(biāo)懸浮時， 立刻從一個顏色變成另一個顏色。 而在CSS3 中使用過渡功能， 鼠標(biāo)懸浮時， 顏色在一定的時間內(nèi)， 從一個顏色過渡到另一個 顏色，給用戶更好、 更細(xì)膩的體驗。

CSS3的過渡功能像是一種黃油， 通過一些CSS的簡單動作觸發(fā)樣式平滑過渡。W3C標(biāo)準(zhǔn)中描述的transition功能很簡單： CSS3的transition允許CSS的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動畫效果改變CSS的屬性值。

以往Web中的動畫都是依賴于JavaScript和Flash實現(xiàn)，但原生CSS過渡在客戶端上需要處理的資源少得多，從而顯得更加平滑。 CSS3過渡與元素上的常規(guī)樣式一起聲明。只要目標(biāo)屬性更改，瀏覽器 就會應(yīng)用過渡。除了使用JavaScript 觸發(fā)動作外，在CSS中也可以通過一些偽類來觸發(fā)， 如 :hover、:focus、:active、:target 和:checked等。 這很重要：無須在JavaScript中編寫動畫，只需要更改一個屬性值并依賴瀏覽器來執(zhí)行所有重要工作。 以下 是使用CSS創(chuàng)建簡單過渡的步驟：

 1). 在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式。 

 2). 聲明過渡元素最終狀態(tài)樣式， 比如懸浮狀態(tài)。 

 3). 在默認(rèn)樣式中通過添加過渡函數(shù)， 添加一些不同的樣式。

transition屬性是一個復(fù)合屬性，出于簡潔性和便于維護(hù)考慮，過渡語法通常以簡化的形式表達(dá)。

transition屬性主要包含四個屬性值：

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

·transition-duration： 指定完成過渡所需的時間。 

·transition-timing-function： 指定過渡函數(shù)。 

http:/ /www.iis7.com/b/wzjk/

·transition-delay： 指定過渡開始出現(xiàn)的延遲時間。

指定過渡函數(shù) transition-timing-function，transition- timing- function屬性指定某種指代過渡“ 緩動函數(shù)”的屬性。此屬性可指定瀏覽器的過渡速度， 以及過渡期間的操作進(jìn)展情況， 可以將某個值指定為預(yù)定義函數(shù)、階梯函數(shù)或者三次貝塞爾曲線。

到目前為止，看到的ease、linear、ease-in、ease-out和ease-in-out等曲線函數(shù)非常一般，用于過渡動畫中也不是十分精確。而現(xiàn)在制作一些動畫需求越來越精確，需要定義一些更精確的函數(shù)。

CSS3 的transition中， 定義三次貝塞爾曲線的語法如右所示： cubic-bezier( P0, P1, P2, P3)

一個三次貝塞爾曲線由四個點控制曲線形狀。每個點由水平和垂直兩個值來確定， 也就是常說的由X和Y值確定。

這些點的值是小數(shù)或者百分比， 不過很少看到使用百分比來設(shè)置一個三次貝塞爾曲線點。而且它們的值都是一個0～1的小數(shù)。 不過有一點需要特別注意， 三次貝塞爾曲線中的P0和P兩個點是無法設(shè)置的， 因為它們總是存在HTML中， 也就是說它們總會是（ 0，0）和（ 1，1）。

注意，三次貝塞爾曲線中的每個點值只允許0～1的值。

step()函數(shù)，step()函數(shù)用于把整個操作領(lǐng)域劃成同樣大小的間隔， 每個間隔都是都是相等的。 該函數(shù)還指定發(fā)生在開始或結(jié)束的時間間隔是否另外輸出百分比（換句話說，如果輸出的百分比為0%表示輸入變化的初始點）。

step() 函數(shù)非常獨特，它允許在固定的間隔播放動畫。例如， 在 step() 函數(shù)圖上可以看出， 動畫屬性比在0%處開始，漲到50%，動畫結(jié)束時， 屬性值達(dá)到100%（ 也就是結(jié)束狀態(tài)屬性）。 并且在各個step() 函數(shù)中每個步驟在過渡動畫中不夠平滑

step(< integer>[,[ start| end]]?) step() 函數(shù)主要包括兩個參數(shù)。 

·第一個參數(shù)是一個數(shù)值< integer>， 主要用來指定step()函數(shù)間隔的數(shù)量， 此值必須是一個大于0的正整數(shù)。

·第二個參數(shù)是可選的， 是start或end， 如果第二個參數(shù)忽略， 則默認(rèn)為end值。 其中step( 1, start)相當(dāng)于step- start； step( 1, end)相當(dāng)于step- end。

偽元素觸發(fā)

使用transition 時， 常用鼠標(biāo)懸?。? hover） 來觸發(fā)過渡。

為說明這與觸發(fā)過渡的實際事件毫無關(guān)聯(lián)， 也為強(qiáng)調(diào)狀態(tài)變化的重要性， 下面提供了 一些觸發(fā)過渡的其他方法。

1. 使用:active “:active”偽類表示用戶單擊某個元素并按住鼠標(biāo)按鈕時顯示的狀態(tài)。 

2. 使用:focus“:focus”偽類通常會在元素接收鍵盤焦點時出現(xiàn)。文本輸入框元素上將發(fā)生過渡， 且該元素得到焦點時會執(zhí)行文本輸入框元素寬度和背景色過渡。

此處作為一個邊點， 當(dāng)對“: hover”偽類應(yīng)用過渡時， 最好將“: focus”添加到選擇器堆棧。 這樣將能夠豐富鼠標(biāo)用戶和鍵盤用戶的體驗。

3. 使用:checked “:checked”偽類在發(fā)生以下狀況時觸發(fā)過渡。 文本框選中時，

4. 媒體查詢觸發(fā) 觸發(fā)元素狀態(tài)變化的另一種方法是使用CSS3媒體查詢（ Media Queries）。

5. JavaScript 觸發(fā) 如果可以基于CSS的狀態(tài)更改觸發(fā)過渡， 自然可以通過 JavaScript做到這一點。

隱式過渡 “隱式過渡”指的是當(dāng)一個屬性改變時引起另一個屬性到一個屬性的過渡。

感謝各位的閱讀！關(guān)于“CSS3中如何實現(xiàn)過渡”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

名稱欄目：CSS3中如何實現(xiàn)過渡
轉(zhuǎn)載源于：http://aaarwkj.com/article26/jpodjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站制作、做網(wǎng)站、小程序開發(fā)、網(wǎng)站建設(shè)、外貿(mào)建站

廣告

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