CSS3 變形與動畫效果

2022-07-29 22:03:40 字數 4346 閱讀 4223

1.旋轉rotate()函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作,設定乙個角度值,用來指定旋轉的幅度。如果這個值為正值,則元素相對原點中心順時針旋轉;如果這個值為負值,元素相對原點中心逆時針旋轉。

transform:rotate(-20deg);

2.扭曲skew()函式能夠讓元素傾斜顯示。它可以將乙個物件以其中心位置圍繞著x軸和y軸按照一定的角度傾斜。這與rotate()函式的旋轉不同,rotate()函式只是旋轉,而不會改變元素的形狀。skew()函式不會旋轉,而只會改變元素的形狀。

skew(x,y)使元素在水平和垂直方向同時扭曲(x軸和y軸同時按一定的角度值進行扭曲變形);

第乙個引數對應x軸,第二個引數對應y軸。如果第二個引數未提供,則值為0,也就是y軸方向上無斜切。

skewy(y)僅使元素在垂直方向扭曲變形(y軸扭曲變形)

skewx(x)僅使元素在水平方向扭曲變形(x軸扭曲變形)

transform: skew(45deg);

3.縮放scale()函式 讓元素根據中心原點對物件進行縮放。

1、 scale(x,y)使元素水平方向和垂直方向同時縮放(也就是x軸和y軸同時縮放)

2、scalex(x)元素僅水平方向縮放(x軸縮放)

3、scaley(y)元素僅垂直方向縮放(y軸縮放)

注意: scale()的取值預設的值為1,當值設定為0.01到0.99之間的任何值,作用使乙個元素縮小;而任何大於或等於1.01的值,作用是讓元素放大。

transform: scale(1.5,0.5);

4.translate()函式可以將元素向指定的方向移動,類似於position中的relative。或以簡單的理解為,使用translate()函式,可以把元素從原來的位置移動,而不影響在x、y軸上的任何web元件。

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

2、translatex(x)僅水平方向移動(x軸移動)

3、translatey(y)僅垂直方向移動(y軸移動)

transform: translate(50px,100px);

transform:translate(50px);//意思是只在x軸上移動50px,y軸不移動。只有乙個引數時,表示只有x軸,y軸預設為0px

5.matrix() 是乙個含六個值的(a,b,c,d,e,f)變換矩陣,用來指定乙個2d變換,相當於直接應用乙個[a b c d e f]變換矩陣。就是基於水平方向(x軸)和垂直方向(y軸)重新定位元素,此屬性值使用涉及到數學中的矩陣,我在這裡只是簡單的說一下css3中的transform有這麼乙個屬性值,如果需要深入了解,需要對數學矩陣有一定的知識。

6.在沒有重置transform-origin改變元素原點位置的情況下,css變形進行的旋轉、位移、縮放,扭曲等操作都是以元素自己中心位置進行變形。但很多時候,我們可以通過transform-origin來對元素進行原點位置改變,使元素原點不在元素的中心位置,以達到需要的原點位置。

transform:可以把屬性連一起用:

transform:scale(0.5,2) skew(10deg,20deg) rotate(45deg) translate(100px,100px);

由於css變形進行的旋轉、位移、縮放,扭曲等操作都是以元素自己中心位置進行變形,所以組合的順序不同,最終的狀態也不同。

7.在css中建立簡單的過渡效果可以從以下幾個步驟來實現:

第一,在預設樣式中宣告元素的初始狀態樣式;

第二,宣告過渡元素最終狀態樣式,比如懸浮狀態;

第三,在預設樣式中通過新增過渡函式,新增一些不同的樣式。  

transition-property用來指定過渡動畫的css屬性名稱,而這個過渡屬性只有具備乙個中點值的屬性(需要產生動畫的屬性)才能具備過渡效果,其對應具有過渡的css屬性主要有:

特別注意:當「transition-property」屬性設定為all時,表示的是所有中點值的屬性。也可以是transform.

transition-duration屬性主要用來設定乙個屬性過渡到另乙個屬性所需的時間,也就是從舊屬性過渡到新屬性花費的時間長度,俗稱持續時間。

transition-timing-function屬性指的是過渡的「緩動函式」。主要用來指定瀏覽器的過渡速度,以及過渡期間的操作進展情況,其中要包括以下幾種函式:

transition-delay屬性和transition-duration屬性極其類似,不同的是transition-duration是用來設定過渡動畫的持續時間,而transition-delay主要用來指定乙個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行。

有時我們想改變兩個或者多個css屬性的transition效果時,只要把幾個transition的宣告串在一起,用逗號(「,」)隔開,然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點:第乙個時間的值為 transition-duration,第二個為transition-delay。

例如:a

8.keyframes被稱為關鍵幀,其類似於flash中的關鍵幀。在css3中其主要以「@keyframes」開頭,後面緊跟著是動畫名稱加上一對花括號「」,括號中就是一些不同時間段樣式規則。

@keyframes changecolor

100%

}

在乙個「@keyframes」中的樣式規則可以由多個百分比構成的,如在「0%」到「100%」之間建立更多個百分比,分別給每個百分比中給需要有動畫效果的元素加上不同的樣式,從而達到一種在不斷變化的效果。

瀏覽器的支援情況:

chrome 和 safari 需要字首 -webkit-;foxfire 需要字首 -moz-。

8.animation-name屬性主要是用來呼叫 @keyframes 定義好的動畫。需要特別注意: animation-name 呼叫的動畫名需要和「@keyframes」定義的動畫名稱完全一致(區分大小寫),如果不一致將不具有任何動畫效果。

語法:animation-name: none | ident[,none|dent]*;

1、ident是由 @keyframes 建立的動畫名,上面已經講過了(animation-name 呼叫的動畫名需要和「@keyframes」定義的動畫名稱完全一致);

2、none為預設值,當值為 none 時,將沒有任何動畫效果,這可以用於覆蓋任何動畫。

注意:需要在 chrome 和 safari 上面的基礎上加上-webkit-字首,firefox加上-moz-。

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(, , , )]*

語法規則:animation-delay:[,]*

語法規則:animation-iteration-count: infinite | [, infinite | ]*

語法規則如下:animation-direction:normal | alternate [, normal | alternate]*

引數:其主要有兩個值:running和paused。

14.animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值:none、forwards、backwords和both。其四個屬性值對應效果如下:

屬性值效果

none

預設值,表示動畫將按預期進行和結束,在動畫完成其最後一幀時,動畫會反轉到初始幀處

forwards

表示動畫在結束後繼續應用最後的關鍵幀的位置

backwards

會在向元素應用動畫樣式時迅速應用動畫的初始幀

both

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

在預設情況之下,動畫不會影響它的關鍵幀之外的屬性,使用animation-fill-mode屬性可以修改動畫的預設行為。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始,或者在動畫結束時停在最後乙個關鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。

CSS3變形效果

css3提供了元素變形效果,也叫做變換。它可以將元素實現旋轉 縮放和平移的功能。transform指定應用的變換功能 transform origin指定變換的起點 transform的屬性值 none無變換 translate 長度值或百分數值 兩個方向平移元素 translatex 長度值或百分...

CSS3變形與動畫上

transform rotate 20deg 以自己中心點為旋轉中心,順時針 逆時針 transform skew 45deg 1 skew x,y 使元素在水平和垂直方向同時扭曲 x軸和y軸同時按一定的角度值進行扭曲變形 2 skewx x 僅使元素在水平方向扭曲變形 x軸扭曲變形 3 skewy...

CSS3變形與動畫下

keyframes被稱為關鍵幀,其類似於flash中的關鍵幀。在css3中其主要以 keyframes 開頭,後面緊跟著是動畫名稱加上一對花括號 括號中就是一些不同時間段樣式規則。在乙個 keyframes 中的樣式規則可以由多個百分比構成的,如在 0 到 100 之間建立更多個百分比,分別給每個百...