CSS3新增屬性(3)

2022-07-18 05:21:10 字數 911 閱讀 1424

1.定義動畫

用keyframes 定義動畫(類似定義類選擇器)

@keyframes 動畫名稱 100% }

動畫序列:

0% 是動畫的開始,100%是動畫的完成,這樣的規則就是動畫序列。

在@keyframes 中規定某項css樣式,就能建立由當前樣式逐漸改為新樣式的動畫效果。

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。可以改變任意多的樣式,任意多的次數。

2.呼叫動畫

使用定義的動畫:div

@keyframes 規定動畫。

animation 所有動畫屬性的簡寫屬性,出了 animation-play-state 屬性。

animation-name 規定@keyfrmanes 動畫的名稱 (必須的)。

animation-duration 規定動畫完成乙個週期所花費的秒或毫秒,預設是0 (必須的)。

animation-timing-function 規定動畫的速度曲線,預設是"ease"。

animation-delay 規定動畫何時開始,預設是0。

animation-play-state 規定動畫是否正在執行或者暫停。預設是"running" 還是 "paused"。

animation-fill-mode 規定動畫結束後狀態,保持狀態forwardsor回到起始backwards(預設狀態)。

animation:myfirst5slinear2sinfinitealternate; (動畫myfirst 5秒內 勻速 2秒後開始 無限重複 反方向;)

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...

css3 新增屬性

background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...

Css3新增屬性

1.新增邊框屬性 box shadow 實現邊框陰影 屬性值有 模糊度 x軸偏移y軸偏移 color 陰影顏色 border radius 實現圓角邊框 屬性值越大角度越大 border image 實現邊框 border image source slice width outset repeat...