CSS3新增屬性2

2022-08-05 13:42:17 字數 1293 閱讀 5744

box-shadow:水平偏移 垂直偏移;   偏移可以負值

box-shadow:水平偏移 垂直偏移 顏色;

box-shadow:水平偏移 垂直偏移 模糊值 顏色; /*最常見的*/

box-shadow:水平偏移 垂直偏移 模糊值 外延值 顏色;

background-size: cover / contain / 400px 300px / 100% 100%

background: color image postion/size repeat attachment

哪些css屬性可以過渡
長度 (padding margin width height  left/top/right/bottom border-width  background-position ...)

顏色變換

純數字 (opacity、z-index)

觸發過渡
偽類觸發  :hover  :focus  ....

**查詢 @media

js

相關屬性
transition-property指定要過渡的屬性 用,隔開。預設是 all

transition-duration 過渡持續時間

transition-timing-function 過渡線性效果 預設 ease

transition-delay 過渡延遲

transition:propertytiming-function duration delay

關鍵幀
@keyframes 動畫名字 

20%

40%

100%

}

相關css屬性
animation-name  指定動畫的名字

animation-duration 動畫的執行時間

animation-timing-function 執行效果速度

animation-delay 延遲

animation-iteration-count 迴圈 次數 infinite(無限)

animation-direction: alternate (正向 反向 交替)\ reverse(反向)

animation-play-state: running / paused

animation 複合屬性

CSS3新增屬性(3)

1 定義動畫 用keyframes 定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫序列 0 是動畫的開始,100 是動畫的完成,這樣的規則就是動畫序列。 在 keyframes 中規定某項css樣式,就能建立由當前樣式逐漸改為新樣式的動畫效果。 動畫是使元素從一種樣式逐漸變化...

css3新增屬性

一 選擇器 1 屬性選擇器 2 結構性偽類 p nth child odd 匹配奇數行 p nth child even 匹配偶數行 p nth child 2n 3 偽類 二 顏色模式 三 文字陰影與描邊 1 文字陰影 光暈效果 color white font size 100px text s...

css3新增動畫

1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear 2s 1s height 2 引數 ease 逐漸變慢 預設值 linear 勻速 ease in 加速 ease out 減速 ease in out 先加速後減...