第97天 CSS3漸變和過渡詳解

漸變是css3當中比較豐富多彩的乙個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少的使用數量，並且具有很強的適應性和可擴充套件性。

可分為線性漸變，徑向漸變

線性梯度

線性漸變指沿著某條直線朝乙個方向產生漸變效果

。

linear-gradient:方向，起始顏色，終止顏色

方向：to left/ to right / to top

1 

2 351 52     
53     
54     
55     
56     
57     
58 59 
執行效果：

徑向梯度

徑向漸變指從

乙個中心點

開始沿著

四周

產生漸變效果

1，必要的元素：

a，輻射範圍

即圓半徑（半徑越大，漸變效果越大）

b，中心點

即圓的中心（中心點的位置是以盒子自身）

c，漸變起始色

d，漸變終止色

2，關於中心點：

中心位置參照的的英文盒子的

左上角

3，關於輻射範圍：

其半徑可以不等，即的英文可以

橢圓

1 

2 350 51     
52     
53     
54     
55     
56     
57 58 
59 執行效果：

param1要過渡的屬性

param2過渡的時間。

過渡是css3中具有顛覆性的特徵之一，可以實現元素不同狀態間的平滑過渡（補間動畫），經常用來製作動畫效果。

補間動畫：

自動完成

從

起始

狀態到

終止

。狀態的的過渡不用管中間的狀態

特點：當前元素只要有「屬性」發生變化時，可以平滑的進行過渡。

1 .box

12 13         /*過渡屬性*/
14         .box:hover

如果所有屬性都過渡，可以使用transition-property:all;

1  .box

18         .box:hover

第97天 CSS3漸變和過渡詳解

漸變是css3當中比較豐富多彩的乙個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少的使用數量，並且具有很強的適應性和可擴充套件性。可分為線性漸變 徑向漸變 linear gradient線性漸變指沿著某條直線朝乙個方向產生漸變效果。linear gradient 方向，起始顏色，終止顏色方向 ...

css3 漸變，陰影，過渡

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

css3漸變 倒影 過渡 20160526

漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。linear gradient 線性漸變 向下 向上 向左 向右 對角方向 radial gradient 徑向漸變 由它們的中心定義 語法 background webkit linear radial gradient ...