CSS基本屬性(三)

2021-10-23 21:47:11 字數 1710 閱讀 2959

css基本屬性3

transition—復合屬性[檢索或設定物件變換時的過渡。]

: 檢索或設定物件中的參與過渡的屬性

none: 不指定過渡的css屬性

all: 所有可以進行過渡的css屬性

自定義屬性:指定要進行過渡的css屬性

: 檢索或設定物件過渡的持續時間

時長:指定物件過渡的持續時間 [單位s秒]

: 檢索或設定物件中過渡的動畫型別

linear:線性過渡。

ease:平滑過渡。

ease-in:由慢到快。

ease-out由快到慢。

ease-in-out: 由慢到快再到慢。

step-start: 等同於 steps(1, start)

step-end: 等同於 steps(1, end)

steps([, [ start | end ] ]?):

接受兩個引數的步進函式。第乙個引數必須為正整數,指定函式的 步數。第二個引數取值可以是start或end,指定每一步的值發生變 化的時間點。第二個引數是可選的,預設值為end。

cubic-bezier(, , , ): 特定的貝 塞爾曲線型別,4個數值需在[0, 1]區間內

: 檢索或設定物件延遲過渡的時間

時長:指定物件過渡的持續時間 [單位s秒]

動畫 animation—復合屬性。檢索或設定物件所應用的動畫特效。

: 檢索或設定物件所應用的動畫名稱

通過@keyframes定義動畫名稱

定義動畫時,簡單的動畫可以直接使用關鍵字from和to,即從一種狀態過渡到另一種狀態:

@keyframes testanimations

to }

如果複雜的動畫,可以混合去設定某個時間段內的任意時間點的樣式:

@keyframes testanimations

20%

40%

60%

80%

to }

@keyframes testanimations

20%

40%

60%

80%

100%

: 檢索或設定物件動畫的持續時間

: 檢索或設定物件動畫的過渡型別

:檢索或設定物件動畫的迴圈次數

: 檢索或設定物件動畫在迴圈中是否反向運動

normal: 正常方向

reverse: 反方向執行

alternate: 動畫先正常執行再反方向執行,並持續交替執行

alternate-reverse: 動畫先反執行再正方向執行,並持續交替執行

: 檢索或設定物件動畫時間之外的狀態

none: 預設值。不設定物件動畫之外的狀態

forwards: 設定物件狀態為動畫結束時的狀態

backwards: 設定物件狀態為動畫開始時的狀態

both: 設定物件狀態為動畫結束或開始的狀態

running: 運動 paused: 暫停

CSS基本屬性

一 visibility屬性 display none 隱藏元素 visibility 顯示 隱藏的 取值 1 visible 預設的可見的 2 hidden 隱藏 依然佔據頁面空間 3 collapse 使用在 元素上 刪除一行和一列的時候不影響 的整體布局 diplay 和 visibility...

CSS基本屬性

background 背景 background color 背景色 background image 背景 background repeat 背景圖平鋪方式 簡寫 background gray url xx.png no repeat 背景色,背景,平鋪方式 font 字型 font styl...

搞定css基本屬性

css層疊樣式表,級聯樣式,簡稱才是樣式表 實現了內容和表示的分離 css和html之間的關係 html是負責網頁的結構 css 是負責構建html元素的樣式 css作用 1.以統一的方式實現樣式的定義 2.提高頁面樣式的可重用性和可維護性 內聯樣式 行內樣式 內部樣式 在head標籤中 外部樣式表...