第97天 CSS3漸變和過渡詳解

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

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

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

linear-gradient:方向，起始顏色，終止顏色方向：to left/to right/to top

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>漸變
title
>
6<
style
>
7div
13/*
linear-gradient:方向 起始顏色 終止顏色
*/14
/*方向：to left to right  to top
*/15
div:nth-child(1)
18/*
不寫方向，預設從上到下
*/19
div:nth-child(2)
22/*
方向可以寫角度 deg
*/23
div:nth-child(3)
28/*
用百分比控制漸變的範圍
*/29
div:nth-child(4)
32/*
顏色突變
*/33
div:nth-child(5)
36div:nth-child(6)
49style
>
50head
>
51<
body
>
52<
div>
div>
53<
div>
div>
54<
div>
div>
55<
div>
div>
56<
div>
div>
57<
div>
div>
58body
>
59html
>
執行效果：

a、輻射範圍即圓半徑  (半徑越大，漸變效果越大

)b、中心點即圓的中心  (中心點的位置是以盒子自身

)c、漸變起始色

d、漸變終止色

2、關於中心點：中心位置參照的是盒子的左上角

3、關於輻射範圍：其半徑可以不等，即可以是橢圓

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>徑向漸變
title
>
6<
style
>
7div
1415
/*徑向漸變：
16radial-gradient(輻射半徑，中心的位置，起始顏色，終止顏色)
17中心點位置：at left right center bottom top
*/18
div:nth-child(1)
21div:nth-child(2)
2425
/*在at前可加輻射半徑
*/26
div:nth-child(3)
2930
/*多個顏色漸變
*/31
div:nth-child(4)
3435
/*橢圓漸變
*/36
div:nth-child(5)
3940
/*球體 用rgba控制透明度，實現立體效果
*/41
div:nth-child(6)
4748
style
>
49head
>
50<
body
>
51<
div>
div>
52<
div>
div>
53<
div>
div>
54<
div>
div>
55<
div>
div>
56<
div>
div>
5758
body
>
59html
>
執行效果：

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

補間動畫：自動完成從起始狀態到終止狀態的的過渡。不用管中間的狀態

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

1

.box
1213
/*過渡屬性*/
14.box:hover

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

1

.box
18.box:hover

第97天 CSS3漸變和過渡詳解

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

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 ...