day19
1、 瀏覽器css3屬性字首
很多css3屬性，最初的預覽版沒有形成最終的正式版，但是瀏覽器為了對這些新屬性形成支援，主流瀏覽器都提供了屬於自己的語法規則「瀏覽器字首「。
-webkit- 谷歌、蘋果 瀏覽器字首
-moz- 火狐瀏覽器字首
-ms- ie瀏覽器字首
-o- 歐鵬瀏覽器字首
注： 新增瀏覽器字首 -> 相容模式
不新增瀏覽器字首 -> 標準模式
漸變：背景色在多個顏色之間平穩的過渡。
線性漸變：從乙個方向到另乙個方向的顏色的變化。
標準模式的語法(不新增瀏覽器字首)：
background:linear-gradient(direction, color-stop1, color-stop2,…)
說明：direction:預設為to bottom，從上到下漸變0；
stop：顏色的分布位置，預設均勻分布，例如有3個顏色，各個顏色的stop均為33.3%。
相容模式語法（新增瀏覽器字首）：
background:linear-gradient(direction, color-stop1, color-stop2,…)
說明：direction：不能新增to，預設指的是從哪個方向開始。
漸變方向：
to left \ to right \ to top
對角線角度的變化
例如：to left top 左上角 \ to right bottom 右下角
漸變線角度的變化
例如： 標準模式：40deg 40度（順時針）
相容模式：90 -40=50deg 等同於 標準模式下的40deg
線性漸變顏色的分布：
linear-gradient(方向，顏色1 20%， 顏色2 30%，顏色3)
到20%這個位置仍然是顏色1，過20%開始想顏色2漸變。
3、 徑向漸變：
徑向漸變：從乙個點到四周的顏色的過度變化。
語法：（必須加瀏覽器字首）
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最遠角。
4、 重複性漸變
重複性線性漸變：
background:repeating-linear-gradient();
background:repeating-radial-gradient();
5、 過渡
過渡：transition
四個屬性：
transition-property: 檢索或設定物件中參與過渡的屬性；
transition-duration: 檢索或設定物件過渡的持續時間；
transition-delay: 檢索或設定物件延遲過渡的時間；
transition-timing-function: 檢索或設定物件中過渡的動畫型別（預設不是勻速，是ease）
簡寫屬性：
transition：過渡的屬性（all） 過渡的時間 延遲時間 動過的型別（linear 勻速）
注：transition 必須通過時間出
css 漸變過渡動畫
css3 漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。線性漸變 linear gradients 向下 向上 向左 向右 對角方向 徑向漸變 radial gradient 它們中心定義 設定形狀 shape circle 表示圓形，ellipse 表示橢圓形 預設值...
CSS3漸變 過渡 轉換 動畫
2 css3漸變的分類 線性漸變 lineargradients 向下 向上 向左 向右 對角方向 徑向漸變 radial gradient 由它們的中心定義 3 css3線性漸變 為了建立乙個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈 現平穩過渡的顏色。同時，你也可以設定乙個起點和乙...
css旋轉45度 css 漸變過渡2D
一 過渡屬性 transition css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠劃過 單擊 獲得焦點或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值 過渡屬性需要觸發事件，如 hover 滑鼠劃過事件 1.transition prop...