css的過渡與漸變

2021-10-23 03:22:48 字數 1773 閱讀 5050

漸變:

一、線性漸變:

從乙個方向到另乙個方向的顏色的變化。

標準模式的語法(不新增瀏覽器字首):

background: linear-gradient(direction, color-stop1, color-stop2, …);

說明:direction:預設為to bottom,即從上向下的漸變;

stop:顏色的分布位置,預設均勻分布,例如有3個顏色,各個顏色的stop均為33.33%。

相容模式語法(新增瀏覽器字首):

background:linear-gradient( direction, color-stop1, color-stop2,。。。)

說明: direction: 不能新增to 預設指的是 從哪個方向開始

漸變方向:

1:to left \ to right \ to top

2: 對角著漸變

to left top \ to right bottom

3: 漸變線角度的變化

例如:標準模式 : 40deg 40度

相容模式 : 90 - 40

線性漸變:顏色的分布:

linear-gradient(方向, 顏色1 20%,顏色2 30%,顏色3 )

到20%這個位置仍然是顏色1 出了20% 開始向顏色2漸變

二、徑向漸變:

從乙個點到四周的顏色的過渡變化。

語法:(必須加瀏覽器字首)

background: radial-gradient(center, shape, size, start-color, …, last-color);

說明:center:漸變起點的位置,可以為百分比,預設是圖形的正中心。

shape:漸變的形狀,ellipse表示橢圓形,circle表示圓形。預設為ellipse,如果元素形狀為正方形的元素,則ellipse和circle顯示一樣。

size:漸變的大小,即漸變到**停止,它有四個值。 closest-side:最近邊; farthest-side:最遠邊; closest-corner:最近角; farthest-corner:最遠角。

關於徑向漸變的大小:

closest-side 最近邊

farthest-side 最遠邊

closest-corner 最近角

farthest-corner 最遠角

三、重複性漸變:

語法:background:-webkit-repeating-radial-gradient(#dd0,pink 5%,#000 10%)

重複性線性漸變

background:repeating-linear-gradient();

重複性徑向漸變

background:repeating-radial-gradient();

過渡:

1. transition-property:檢索或設定物件中的參與過渡的屬性

2. transition-duration:檢索或設定物件過渡的持續時間

3. transition-delay:檢索或設定物件延遲過渡的時間

4. transition-timing-function:檢索或設定物件中過渡的動畫型別

動畫的運動型別:

預設的不是勻速 ,預設的是ease(逐漸減慢)

簡寫屬性:

transition:過渡的屬性(all) 過渡的時間 延遲時間 動畫的型別(linear 勻速)

注:transition 必須通過事件觸發!(滑鼠滑過)改變css屬性的值。

css 漸變 過渡

day19 1 瀏覽器css3屬性字首 很多css3屬性,最初的預覽版沒有形成最終的正式版,但是瀏覽器為了對這些新屬性形成支援,主流瀏覽器都提供了屬於自己的語法規則 瀏覽器字首 webkit 谷歌 蘋果 瀏覽器字首 moz 火狐瀏覽器字首 ms ie瀏覽器字首 o 歐鵬瀏覽器字首 注 新增瀏覽器字首...

css 漸變過渡動畫

css3 漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。線性漸變 linear gradients 向下 向上 向左 向右 對角方向 徑向漸變 radial gradient 它們中心定義 設定形狀 shape circle 表示圓形,ellipse 表示橢圓形 預設值...

css3 漸變,陰影,過渡

opacity 透明度,值為0 1,越到1越不透明 rgba r,g,b,a rgb分別表示紅綠藍,可用正整數和分數表示,a是alpha透明度,取值0 1。rgba和opacity透明的不同在於rgba不影響盒子中的字,而opacity連字一起透明。顏色漸變 linear gradient poin...