動畫相關之線性漸變和徑向漸變

2022-07-26 12:57:08 字數 3047 閱讀 3833

線性漸變,表示兩種顏色或多種顏色之間的平滑過渡。由漸變線和色標組成,漸變線控制漸變方向,色標控制顏色變化(包含乙個顏色值和位置)。

漸變線的起點和終點與漸變框乙個角垂直線相交,且經過漸變框中心。

角度漸變線可以使用角度來指定方向,0deg表示沿著元素中心的y軸從下到上,正直表示順時針旋轉。

關鍵字漸變線也可以使用關鍵字來指定方向,預設為to bottom

to top 表示 0deg

to right 表示 90deg

to bottom 表示 180deg

to left 表示 -90deg(或270deg)

to top left 表示 -45deg(或315deg)

to top right 表示 45deg

to bottom left 表示 -135deg(或225deg)

to bottom right 表示 135deg

色標由顏色值和位置組成,每個線性漸變至少設定兩個色標。

如果只有兩個色標,可省略位置,將分別為0%和100%位置。

// 等於linear-gradient(red 0%,blue 100%)

linear-gradient(red,blue);

如果只有兩個色標,且設定位置,則0%n%為第一種顏色,n%m%為第一種顏色到第二種顏色的過渡,m%~100%為第二種顏色。

background-image: linear-gradient(red 20%,blue 80%);

// 等價

background-image: linear-gradient(red 0%,red 20%,blue 80%,blue 100%);

如果多個色標指定同一位置,處在中間的色標無效。

background-image: linear-gradient(red 50%,white 50%,black 50%);

// 等價

background-image: linear-gradient(red, 50%,black 50%);

如果多個色標沒有指定位置,則均勻分布。

// 各佔33.333%

background-image: linear-gradient(red,green,blue);

重複漸變,表示重複線性漸變的效果,使色標在漸變線上無線重複。值得注意的是,只有首尾兩個色標位置不在0%或100%時,重複漸變才生效。

background-image: repeating-linear-gradient(red 20%,blue 50%);
徑向漸變(radial-gradient),指從橢圓中心點由內向外進行顏色漸變。由橢圓和色標組成,橢圓控制漸變位置、大小和形狀,色標控制顏色變化(包含乙個顏色和位置)。

radial-gradient([[||]?[at ,]?[,]+)
橢圓控制漸變形狀、大小和位置。

形狀橢圓形狀(shape),可選擇圓(circle)橢圓(ellipse),預設為ellipse。

大小可使用關鍵字,百分比或長度單位。如果是圓,則表示半徑;如果是橢圓,第乙個值表示水平直徑,第二隻表示垂直直徑;如果是關鍵字,如下所示:

closest-side: 最近邊

closest-corner: 最近角

farthest-side: 最遠邊

farthest-side: 最遠角

位置

橢圓位置有多種表示方式,可通過關鍵字,百分比或長度來表示。

// 關鍵字

left right top bottom

// 百分比:x軸百分比相對框的寬度,y軸百分比相對於框的高度

50% 60%

// 長度:以左上角為0點進行定位

色標由顏色值和位置組成,每個線性漸變至少設定兩個色標。

如果只有兩個色標,可省略位置,將分別為0%和100%位置。

// 等於linear-gradient(red 0%,blue 100%)

linear-gradient(red,blue);

如果只有兩個色標,且設定位置,則0%n%為第一種顏色,n%m%為第一種顏色到第二種顏色的過渡,m%~100%為第二種顏色。

background-image: radial-gradient(red 20%,blue 80%);

// 等價

background-image: radial-gradient(red 0%,red 20%,blue 80%,blue 100%);

如果多個色標指定同一位置,處在中間的色標無效。

background-image: radial-gradient(red 50%,white 50%,black 50%);

// 等價

background-image: radial-gradient(red, 50%,black 50%);

如果多個色標沒有指定位置,則均勻分布。

// 各佔33.333%

background-image: radialr-gradient(red,green,blue);

重複漸變,表示重複線性漸變的效果,使色標在漸變線上無線重複。值得注意的是,只有首尾兩個色標位置不在0%或100%時,重複漸變才生效。

background-image: repeating-radial-gradient(red 20%,blue 80%);

線性漸變和徑向漸變

linear gradient direction,color 寫法 background webkit linear gradient direction,color 1.direction 方向,預設方向是自上而下 寫法有 1.background webkit linear gradient ...

線性漸變和徑向漸變

格式 background image linear gradient 方向,起始顏色 終止顏色 方向 to left to right to top to bottom 角度 360 180 45 從左下到右上 90 相當於 to right 從左到右 135 從左上到右下 180 從上到下 di...

css3 線性漸變和徑向漸變

線性漸變 ie6以下不相容 徑向漸變 只支援firefox chrome和safari 注意 background image 可以寫 background 我自己在網頁中寫的徑向漸變相容 firefox chrome ie10 ie10 safari background image老式寫法 相容...