css3 過渡和2d變換 回顧

2022-05-05 21:06:10 字數 3283 閱讀 1976

1.transition

語法:transition: property duration timing-function delay;

transition-property 設定過渡效果的css 屬性名稱

語法: transition-property: none | all | property

none 沒有屬性會獲得過度效果

all 所有屬性都將獲得過度效果。

property 定義應用過度效果css 屬性名稱列表,列表以逗號分割。

indent 元素屬性名稱

transition-duration 完成過度效果需要多少秒或者毫秒

語法:transition-duration:time;

time 規定完成過渡效果需要的花費的時間。預設值是0, 意味著不會有效果

transition-timing-function 規定速度效果的速度曲線。

語法: transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

linear 規定以相同速度開始至結束的過度效果。

ease 規定慢速度開始,然後邊快,然後慢速度結束。

ease-in 規定以慢速度開始的過度效果。

ease-out 規定以慢速度結束的過度效果。

ease-in-out 規定以慢速度開始和結束的過渡效果。

cubic-bezier(n,n,n,n) 在cubic-bezier中定義自己的值,可能的值是0至1之間的數值。

transition-delay  定義過度效果何時開始

語法:transititon-delay: time;

time 規定在過渡效果開始之前需要等待的時間。

示例:

結果:如圖

示例:(貝塞爾曲線)

結果:如圖

示例:(多種變化一起寫)

結果:如圖

字母上就是變形,改變的意思,在css3中transform主要包括一下幾種,旋轉rotate,扭曲skew,縮放scale和移動translate 以及矩陣變形matrix 

語法:transform : none | [ ]*

也就是: transform: rotate | scale | skew | translate |matrix;

none表示不進怎麼變換;表示乙個或者多個變換函式,以空格分開;

rotate,scale,translate 三種,但這裡需要提醒大家的,以往我們疊加效果都是用逗號(「,」)隔開,

但transform中使用多個屬性時卻需要有空格隔開。大家記住了是空格隔開。

旋轉rotate

通過指定的角度引數對原元素指定乙個2d rotation(2d 旋轉),需先有transform-origin屬性的定義。

transform-origin定義的是旋轉的基點,其中angle是指旋轉角度

如果設定的值為正數表示順時針旋轉,如果設定的值為負數,則表示逆時針旋轉。

如:transform:rotate(30deg):

移動translate

移動translate我們分為三種情況:translate(x,y)水平方向和垂直方向同時移動(也就是x軸和y軸同時移動);translatex(x)僅水平方向移動(x軸移動translatey(y)僅垂直方向移動(y軸移動)

縮放scale

縮放scale和移動translate是極其相似,他也具有三種情況:scale(x,y)使元素水平方向和垂直方向同時縮放(也就是x軸和y軸同時縮放);scalex(x)元素僅水平方向縮放(x軸縮放);

scaley(y)元素僅垂直方向縮放(y軸縮放),但它們具有相同的縮放中心點和基數,

其中心點就是元素的中心位置,縮放基數為1,如果其值大於1元素就放大,反之其值小於1,元素縮小。

扭曲skew

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

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

矩陣matrix

matrix(, , , , ,

) 以乙個含六值的(a,b,c,d,e,f)

變換矩陣的形式指定乙個2d變換,相當於直接應用乙個[a b c d e f]變換矩陣。就是基於水平方向(x軸)和垂

直方向(y軸)重新定位元素,改變元素的基點 transform-origin他的主要作用就是讓我們在進行transform動作之前可以改變元素的基點位置,

因為我們元素預設基點就是其中心位置,換句話說我們沒有使用transform-origin改變元素基點位置的情況下,

transform進行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進行變化的。

示例: (旋轉)

111

結果:如圖

示例:(位移)

111

結果:元素的位置發生變化。

示例:(縮放)

111

結果:如圖

示例:(扭曲)

111

結果:如圖

示例:(矩陣)

111

結果:如圖

demo 示例:

結果:如圖

CSS3漸變 過渡 2d變換

寫法 一 background gradient linear,起點 水平 垂直 終點,color stop 開始漸變的位置,顏色 注 color stop 開始漸變的位置,顏色 後面可以連著寫多個值。寫法 二 background webkit linear gradient 方向 角度 deg ...

CSS3之過渡及2D變換

transition duration 運動時間 transition delay 延遲時間 transition timing function 運動形式 ease 逐漸變慢 預設 linear 勻速 ease in 加速 ease out 減速 ease in out 先加速後減速 cubic ...

CSS3之過渡及2D變換

transition過渡 transition duration 運動時間 transition delay 延遲時間 transition timing function 運動形式 ease 逐漸變慢 預設 linear 勻速 ease in 加速 ease out 減速 ease in out ...