CSS3中的transition屬性詳解

2022-02-16 13:59:55 字數 965 閱讀 5322

transition: property duration timing-function delay;
transition 屬性是個復合屬性,她包括以下幾個子屬性:

a
transition-property: none |all |property;
值為 none 時,沒有屬性會獲得過渡效果,值為 all 時,所有屬性都將獲得過渡效果,值為指定的 css 屬性應用過渡效果,多個屬性用逗號隔開

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

transition-timing-function:linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
該屬性指的是過渡的「緩動函式」。主要用來指定瀏覽器的過渡速度,以及過渡期間的操作進展情況,解釋下:

注意:值 cubic-bezier(n,n,n,n)可以中定義自己的值,如 cubic-bezier(0.42,0,0.58,1)

我試著換不同的值看看區別,但並不是很明顯,把持續時間弄長點估計更能看出,但是因為gif太大怕傳不上來所以就弄了3秒的時間。

Css3中的背景

css3對背景作了很多改變,最明顯的是可以選擇多重背景,同時它也增加了四個新的屬性。多重背景 css3中,對乙個元素可以使用一張以上的背景。除了使用逗號將分開以外,其 與css2相同。第乙個宣告的定位在元素的頂部,接下來的層列於下,像這樣 該屬確定背景畫區,有以下幾種可能的屬性 background...

CSS3中的動畫

animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...

CSS3中的屬性

讓邊框變成圓角 border radius 100px border radios 10px 20px 30px 40px transform rotate 45deg retate是順時針旋轉角度 transform translate 50px,100px 把元素從左側移動 50 畫素,從頂端移...