(2)、css3漸變的分類
線性漸變（lineargradients）-向下/向上/向左/向右/對角方向
徑向漸變（radial-gradient）-由它們的中心定義
(3)、css3線性漸變
為了建立乙個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈
現平穩過渡的顏色。同時，你也可以設定乙個起點和乙個方向（或乙個角度）。
1、從上到下
下面的例項演示了從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：
#grad
(4)、css3徑向漸變
徑向漸變由它的中心定義。
為了建立乙個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要
呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、
大小。預設情況下，漸變的中心是center（表示在中心點），漸變的形狀是ellipse
（表示橢圓形），漸變的大小是farthest-corner（表示到最遠的角落）。
2.css3過渡
(1)、它是如何工作？
css3過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須
規定兩項內容：
1、指定要新增效果的css屬性
2、指定效果的持續時間。
(2)、過渡屬性
下表列出了所有的過渡屬性:
屬性描述css
transition簡寫屬性，用於在乙個屬性中設定四個過渡屬3
性。transition-property規定應用過渡的css屬性的名稱。
transition-duration定義過渡效果花費的時間。預設是0。
transition-timing-function規定過渡效果的時間曲線。預設是"ease"。
transition-delay規定過渡效果何時開始。預設是0。
transform-origin:righttop設定旋轉軸心
3.css32d轉換
(1)、什麼是css3轉換
css3轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。
轉換的效果是讓某個元素改變形狀，大小和位置。
(2)、2d轉換
translate()
rotate()
scale()
skew()
matrix()
它們都在transform屬性中。
(5)、translate()方法
translate()方法，根據左(x軸)和頂部(y軸)位置給定的引數，從當前元素位置移
動。translate值（50px，100px）是從左邊元素移動50個畫素，並從頂部移動100
畫素。(6)、rotate()方法
rotate()方法，在乙個給定度數順時針旋轉的元素。負值是允許的，這樣是元素
逆時針旋轉。
rotate值（30deg）元素順時針旋轉30度。
transform-origin:righttop;設定旋轉軸心
(7)、scale()方法
scale()方法，該元素增加或減少的大小，取決於寬度（x軸）和高度（y軸）的
引數：scale（2,3）轉變寬度為原來的大小的2倍，和其原始大小3倍的高度。
(8)、skew()方法
包含兩個引數值，。
skewx();表示只在x軸(水平方向)傾斜。
skewy();表示只在y軸(垂直方向)傾斜。
.css33d轉換
(1)、3d轉換
css3允許您使用3d轉換來對元素進行格式化。
在本節中，您將學到其中的一些3d轉換方法：
rotatex()
rotatey()
(2)、rotatex()方法
rotatex()方法，圍繞其在乙個給定度數x軸旋轉的元素。
div演示示例：rotatex()方法
(3)、rotatey()方法
rotatey()方法，圍繞其在乙個給定度數y軸旋轉的元素。
div{transform:rotatey(130deg);
-webkit-transform:rotatey(130deg);/*safari與chrome*/
演示示例：rotatey()方法
(4)、3d轉換其他方法
函式描述
matrix3d(n,n,n,n,n,n,定義3d轉換，使用16個值的4x4矩陣。
n,n,n,n,n,n,n,n,n,n)
translate3d(x,y,z)定義3d轉化。
translatex(x)定義3d轉化，僅使用用於x軸的值。
translatey(y)定義3d轉化，僅使用用於y軸的值。
translatez(z)定義3d轉化，僅使用用於z軸的值。
scale3d(x,y,z)定義3d縮放轉換。
scalex(x)定義3d縮放轉換，通過給定乙個x軸的值。
scaley(y)定義3d縮放轉換，通過給定乙個y軸的值。
scalez(z)定義3d縮放轉換，通過給定乙個z軸的值。
rotate3d(x,y,z,angle)定義3d旋轉。
rotatex(angle)定義沿x軸的3d旋轉。
rotatey(angle)定義沿y軸的3d旋轉。
rotatez(angle)定義沿z軸的3d旋轉。
perspective(n)定義3d轉換元素的透視檢視。
(5)、居於與css3的動畫屬性
下面的**列出了@keyframes規則和所有動畫屬性：
屬性描述css
@keyframes規定動畫。
animation所有動畫屬性的簡寫屬性，除了
animation-play-state屬性。
animation-name規定@keyframes動畫的名稱。
css 漸變過渡動畫
css3 漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。線性漸變 linear gradients 向下 向上 向左 向右 對角方向 徑向漸變 radial gradient 它們中心定義 設定形狀 shape circle 表示圓形，ellipse 表示橢圓形 預設值...
css 漸變 過渡
day19 1 瀏覽器css3屬性字首 很多css3屬性，最初的預覽版沒有形成最終的正式版，但是瀏覽器為了對這些新屬性形成支援，主流瀏覽器都提供了屬於自己的語法規則 瀏覽器字首 webkit 谷歌 蘋果 瀏覽器字首 moz 火狐瀏覽器字首 ms ie瀏覽器字首 o 歐鵬瀏覽器字首 注 新增瀏覽器字首...
CSS3漸變 過渡 2d變換
寫法 一 background gradient linear,起點 水平 垂直 終點，color stop 開始漸變的位置，顏色 注 color stop 開始漸變的位置，顏色 後面可以連著寫多個值。寫法 二 background webkit linear gradient 方向 角度 deg ...