一、過渡屬性 transition
css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠劃過、單擊、獲得焦點或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值
過渡屬性需要觸發事件，如：hover（滑鼠劃過事件）
1. transition-property：檢索或設定物件中的參與過渡的屬性
說明：屬性值可以單獨設定否個屬性，也可以設定多個屬性 width，height； 還可以設定為all（預設值）代表所有屬性
2. transition-duration：檢索或設定物件過渡的持續時間
說明：設定過度時間（s, ms） 1s = 1000ms
3. transition-delay：檢索或設定物件延遲過渡的時間
說明：設定延遲過度時間（s, ms） 屬性值為正值的時候是延遲執行過渡效果，為負值的時候是提前只想過渡效果；
4. transition-timing-function：檢索或設定物件中過渡的動畫型別
說明：linear 勻速
ease（預設值） 逐漸慢下來
ease-in 加速
ease-out 減速
ease-in-out 先加速後減速
貝塞爾曲線**：cubic-bezier.com
複合式寫法：transition:all 2s 1s linear ;
transition: 2s linear 1s all ;
說明：當使用複合式寫法的時候，過度時間和延遲時間的順序是不能互換的，第乙個值代表過度時間，第二個值代表延遲時間；
注：哪個元素發生變形，就把過渡屬性新增給誰； 建議寫給元素初始的效果裡；
二、2d transform
transform翻譯成漢語具有"變換"或者"改變"的意思。通過此屬性具有非常強大的功能，比如可以實現元素的位移、拉伸或者旋轉等效果最能體現transform 屬性強大實力的是實現元素的3d變換效果。
2d功能函式：
1、2d位移 translate()
說明：translate(tx) 當引數設定乙個值的時候，代表水平方向的位移；
translate(tx，ty) 第乙個值代表水平方向的距離，第二個值 垂直方向的距離；
translate(tx，ty, tz) 第乙個值代表水平方向的距離，第二個值 垂直方向的距離.第三個值 沿z軸移動（3d）
translatex(tx) 指定方向設定位移 沿x軸移動
translatey(ty) 指定方向設定位移 沿y軸移動
translatez(tz) 指定方向設定位移 沿z軸移動 ( 3d)
當屬性值為正值時 代表的是向右或者向下移動，當為負值的時候 代表 向左或向上移動
說明：屬性值可以用px 也可以用%（百分比大小的參照物是元素的寬高）
說明：translate（）位移的效果和定位裡的relative的效果是類似的，都是在當前位置進行位移的，對其元素的布局是沒有影響的，原來的位置的保留的。
2、2d縮放scale()
說明： 屬性值代表的是倍數，是不用加單位； 0——1 之間是 縮小的效果， 大於1的時候都是放大效果；
預設值 是 1；
scale( 值1 ) 代表水平和垂直都放大或者縮小
scale( 值1，值2 ) 值1： 水平方向的縮放大小 值2 ：垂直方向
屬性值可以設定為負值，但是很少用；
scalex（值） 水平方向的縮放比例
scaley（值） 垂直方向的縮放比例
scalez（值） z軸方向的縮放比例 （3d）
3、2d旋轉讓rotate()
說明: 屬性值的單位是度（deg）
rotate() 沿著中心點旋轉； 只能放乙個屬性值 ，正值：順時針旋轉； 負值： 逆時針旋轉；
rotatex() 沿x軸旋轉
rotatey() 沿y軸旋轉
rotatez() 沿z軸旋轉 （3d）
4、2d傾斜 skew()
說明：屬性值的單位是度（deg） ；屬性值為正值：向左 或向上傾斜 負值：向右或向下傾斜
skew( 值1 ) 乙個值的時候 代表 沿x軸傾斜
skew( 值1，值2) 值1： 沿x軸的傾斜 值2 ：沿y軸的傾斜
skewx（） 沿x軸的傾斜
skewy（） 沿y軸的傾斜
說明：元素通過 transform進行變形時，都是對其他元素的布局不產生影響的。不脫離文件流。
變形時元素預設情況下都是沿著元素的中心點去變形的
當使用複合式寫法的時候，他們順訊不同，會導致結果不一樣，他們執行的順訊是從後向前解析的。
transform: translate(100px) rotate(60deg);
5、原點設定屬性：transform-origin
定義：transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉，該屬性只有在設定了transform屬性的時候起作用；
說明：transform-origin：值1 值2 ； 值1： 水平 值2： 垂直
px % left top right bottom ;
6、backface-visibility ：隱藏被旋轉的 div 元素的背面
backface-visibility:visible;可見 （預設值）
backface-visibility:hidden;不可見
backface-visibility 的bug : 如果元素翻轉後結束後顯示在上一層，給他加乙個背景色就可以解決了。
三、css3 漸變
概念：css3 漸變（gradient）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 以前，你必須使用影象來實現這些效果，現在通過使用 css3 的漸變（gradients）即可實現。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
線性漸變：
語法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
說明：direction：預設為to bottom，即從上向下的漸變；
還可以設定為度數。自上向右 （0度 —— 90度的變化） -- 舊的標準是相反 自右而上 （ 90—— 0）
stop：顏色的分布位置，預設均勻分布，例如有3個顏色，各個顏色的stop均為33.33%。
徑向漸變：
語法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
position：漸變起點的位置，可以為百分比，預設是圖形的正中心。
shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。預設為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。
size：漸變的大小，即漸變到**停止，它有四個值。 closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角。
css 漸變 過渡
day19 1 瀏覽器css3屬性字首 很多css3屬性，最初的預覽版沒有形成最終的正式版，但是瀏覽器為了對這些新屬性形成支援，主流瀏覽器都提供了屬於自己的語法規則 瀏覽器字首 webkit 谷歌 蘋果 瀏覽器字首 moz 火狐瀏覽器字首 ms ie瀏覽器字首 o 歐鵬瀏覽器字首 注 新增瀏覽器字首...
css 漸變過渡動畫
css3 漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。線性漸變 linear gradients 向下 向上 向左 向右 對角方向 徑向漸變 radial gradient 它們中心定義 設定形狀 shape circle 表示圓形，ellipse 表示橢圓形 預設值...
CSS3漸變 過渡 轉換 動畫
2 css3漸變的分類 線性漸變 lineargradients 向下 向上 向左 向右 對角方向 徑向漸變 radial gradient 由它們的中心定義 3 css3線性漸變 為了建立乙個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈 現平穩過渡的顏色。同時，你也可以設定乙個起點和乙...