漸變&2d

**漸變&2d**      

漸變的概念

漸變是由浏覽器生成解析的

背景圖檔

屬性：background

線性漸變

徑向漸變

重複漸變

線性漸變

屬性：background

屬性值：linear-gradient（參數）

第一個參數表示方向值（可選參數）

第二個參數表示顔色1

第二個參數表示顔色2

.。。。

注意：

第一個參數方向值是有預設值的（預設從上到下）可以不設定

多個參數之間用逗号隔開的

線性漸變是有相容問題的（相容寫法）

第一個參數的使用：方向值

1.從一個方向到另外一個方向 to+結束方向

2.從一個角到另外一個角 to+結束的角度（水準+垂直）

3.角度值（機關是deg）

相容寫法：需要加浏覽器字首

關于相容寫法的方向值問題 和标準寫法差別

從一個方向到另外一個方向 開始的方向值

從一個角度到另外一個角 開始的角度

角度值（機關是deg） 90deg 标準的角度值

總結：

浏覽器的發展 可以不考慮相容寫法

在工作中 線性漸變的需求 一般都是設定導航的背景色

标準寫法：background：linear-gradient（顔色1，顔色2）

徑向漸變

徑向漸變的屬性：background

屬性值：radial-gradient

第一個參數表示起點的位置

預設是容器的中心

方向值 水準方向/垂直方向

value值（坐标值）

第二個參數表示漸變的形狀

預設是橢圓形

圓形 circle

第三個參數表示漸變的大小

設定漸變的大小 和 形狀是有沖突的

設定大小和形狀的時候 兩個參數之間不能用逗号 需要用空格

第四個參數表示顔色1

第五個參數表示顔色2

總結：

在工作中很少使用徑向漸變

background：radial-gradient（顔色1，顔色2）

重複漸變

重複線性漸變：background：repeating-linear-gradient（）

重複徑向漸變：background：repeating-radial-gradient（）

過渡的使用

過渡屬性：

過渡是控制元素從一種狀态到另外一種狀态變化過程（none-block 不可以使用過渡）

過渡的屬性

1.設定參與過渡的屬性 transition-property（屬性）

在後面填寫參與過渡的屬性即可 多個屬性之間用空格隔開

常用一個英文單詞來表示all 或者是不寫（預設就是全部屬性參加過渡）

2.過渡的時間 transition-duration

s 秒 ms 毫秒 最佳0.8s

3.過渡的延遲時間 transition-delay

4.過渡的運動方式 transition-timing-function

預設方式為ease；

簡寫方式

屬性：transition

屬性值：屬性 時間 延遲 方式

css3中2D的位移

屬性：transform

屬性值：

translate（兩個參數）水準垂直方向的值

translateX（方向值）

translateY（方向值）

位移不會讓元素脫離文檔流

縮放

屬性值（功能函數）：scale（參數）

scale（寬，高）寬度和高度值相同時，可以簡寫成一個

小于0 元素先變成0 然後變成設定的倍數（元素沿着順時針旋轉180deg）

等于0 隐藏

大于0 小于1 縮小

大于1 放大

scaleX（）寬度

scaleY（）高度

旋轉

屬性值：rotate（一個參數）

參數是正值：沿着順時針旋轉 參數是負值 沿着逆時針 預設是沿着Z軸旋轉

參數的機關是deg（角度）

rotateX（）單杠運動 觀察的時候都是從正軸方向觀察 正值都是順時針 負值都是逆時針

rotateY（）鋼管舞，旋轉木馬

傾斜

屬性值：skew（兩個參數）

skewX/Y（）