溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3中變形、過渡、動畫屬性的示例分析

發(fā)布時間:2022-03-02 11:52:16 來源:億速云 閱讀:120 作者:小新 欄目:web開發(fā)

小編給大家分享一下CSS3中變形、過渡、動畫屬性的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

css3中制作動畫的幾個屬性:css3中的變形(transform)、過渡(transition)、動畫(animation)。

CSS3中的變形、過渡、動畫屬性講解

一、 CSS3變形(transform)

語法:

1.1、旋轉(zhuǎn)rotate()

rotate(<angle>) :通過指定的角度參數(shù)對元素指定一個2D rotation(2D旋轉(zhuǎn)),需先有transform-origin屬性的定義(默認旋轉(zhuǎn)中點是中心點)。

transform-origin定義的是旋轉(zhuǎn)的基點,其中angle是指選擇角度,正順時針旋轉(zhuǎn),負逆時針旋轉(zhuǎn)。

CSS3中變形、過渡、動畫屬性的示例分析

CSS3中的變形、過渡、動畫屬性講解

1.2、移動translate(X,Y)

transform(100px,20px);

CSS3中變形、過渡、動畫屬性的示例分析

CSS3中的變形、過渡、動畫屬性講解

transform:translateX(100px):

CSS3中變形、過渡、動畫屬性的示例分析

CSS3中的變形、過渡、動畫屬性講解

transform:translateY(20px)

1.3、縮放scale(X,Y)

scale(<number>[, <number>]):提供執(zhí)行[sx,sy]縮放矢量的兩個參數(shù)指定一個2D scale(2D縮放)。如果第二個參數(shù)未提供,則取與第一個參數(shù)一樣的值。而Y是一個可選參數(shù),如果沒有設(shè)置Y值,則表示X,Y兩個方向的縮放倍數(shù)是一樣的,并以X為準。如:transform:scale(2,1.5);

CSS3中變形、過渡、動畫屬性的示例分析

CSS3中的變形、過渡、動畫屬性講解

1.4、斜切skew()

skew(<angle> [, <angle>]) :X軸Y軸上的skew transformation(斜切變換)。第一個參數(shù)對應(yīng)X軸,第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供,則值為0,也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行,第一個參數(shù)是水平方向扭曲角度,第二個參數(shù)是垂直方向扭曲角度。其中第二個參數(shù)是可選參數(shù),如果沒有設(shè)置第二個參數(shù),那么Y軸為0deg。同樣是以元素中心為基點,我們也可以通過transform-origin來改變元素的基點位置。

transform:skew(30deg,10deg);

CSS3中變形、過渡、動畫屬性的示例分析

CSS3中的變形、過渡、動畫屬性講解

方法:X軸:正數(shù)為左,負數(shù)為右; Y軸:正數(shù)為下,負數(shù)為上

二、CSS3過渡(transition)

CSS3中變形、過渡、動畫屬性的示例分析

CSS3中的變形、過渡、動畫屬性講解

屬性詳解

transition-property

不是所有屬性都能過渡,只有屬性具有一個中間點值才具備過渡效果。transition-duration

指定從一個屬性到另一個屬性過渡所要花費的時間。默認值為0,為0時,表示變化是瞬時的,看不到過渡效果。

transiton-timing-function

過渡函數(shù),有如下幾種:

CSS3中變形、過渡、動畫屬性的示例分析

CSS3中的變形、過渡、動畫屬性講解

觸發(fā)過渡

單純的代碼不會觸發(fā)任何過渡操作,需要通過用戶的行為(如點擊,懸浮等)觸發(fā),可觸發(fā)的方式有::hoever :focus :checked 媒體查詢觸發(fā) JavaScript觸發(fā)

局限性

transition的優(yōu)點在于簡單易用,但是它有幾個很大的局限。

CSS Animation就是為了解決這些問題而提出的。

三、CSS3 animation(動畫)

CSS3的animation屬性可以像Flash制作動畫一樣,通過控制關(guān)鍵幀來控制動畫的每一步,實現(xiàn)更為復(fù)雜的動畫效果。ainimation實現(xiàn)動畫效果主要由兩部分組成:

1)通過類似Flash動畫中的幀來聲明一個動畫;2)在animation屬性中調(diào)用關(guān)鍵幀聲明的動畫。**

注:animation屬性到目前位置得到了大多數(shù)瀏覽器的支持,但是,需要添加瀏覽器前綴哦!

animation動畫屬性

還是先列表格來說明屬性,自己感覺會比較清晰:

CSS3中變形、過渡、動畫屬性的示例分析

CSS3中的變形、過渡、動畫屬性講解

(1)animation-name:none為默認值,將沒有任何動畫效果,其可以用來覆蓋任何動畫(2)animation-duration:默認值為0,意味著動畫周期為0,也就是沒有任何動畫效果(3)animation-timing-function:與transition-timing-function一樣(4)animation-delay:在開始執(zhí)行動畫時需要等待的時間(5)animation-iteration-count:定義動畫的播放次數(shù),默認為1,如果為infinite,則無限次循環(huán)播放(6)animation-direction:默認為nomal,每次循環(huán)都是向前播放,(0-100),另一個值為alternate,動畫播放為偶數(shù)次則向前播放,如果為基數(shù)詞就反方向播放(7)animation-state:默認為running,播放,paused,暫停(8)animation-fill-mode:定義動畫開始之前和結(jié)束之后發(fā)生的操作,默認值為none,動畫結(jié)束時回到動畫沒開始時的狀態(tài);forwards,動畫結(jié)束后繼續(xù)應(yīng)用最后關(guān)鍵幀的位置,即保存在結(jié)束狀態(tài);backwards,讓動畫回到第一幀的狀態(tài);both:輪流應(yīng)用forwards和backwards規(guī)則。

@keyframesCSS3的animation制作動畫效果主要包括兩部分:1. 用關(guān)鍵幀聲明一個動畫,2.在animation調(diào)用關(guān)鍵幀聲明的的動畫。

@keyframes就是關(guān)鍵幀。這個幀與Flash里的幀類似,一個動畫中可以有很多個幀。

一個@keyframes中的樣式規(guī)則是由多個百分比構(gòu)成的,可以在這個規(guī)則上創(chuàng)建多個百分比,從而達到一種不斷變化的效果。另外,@keyframes必須要加webkit前綴。舉個例子:

上面代碼中的0% 100%的百分號都不能省略,0%可以由from代替,100%可以由to代替。要讓changeColor動畫有效果,就必須要通過CSS3animation屬性來調(diào)用它。

區(qū)別

animation屬性類似于transition,他們都是隨著時間改變元素的屬性值,其主要區(qū)別在于:transition需要觸發(fā)一個事件才會隨著時間改變其CSS屬性;animation在不需要觸發(fā)任何事件的情況下,也可以顯式的隨時間變化來改變元素CSS屬性,達到一種動畫的效果

以上是“CSS3中變形、過渡、動畫屬性的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI