css3過渡圖畫轉換

  • 2020 年 1 月 14 日
  • 筆記

css3漸變 線性漸變（Linear Gradient）- 向下/向上/向左/向右/對角方向 徑向漸變（Radial Gradient）- 由它們的中心定義 repeating-linear-gradient() 函數用於重複線性漸變： 線性漸變：linear-gradient：

徑向漸變 radial-gradient ：

線性漸變 （默認從上向下） 1、background: linear-gradient(red, blue); 基本的漸變，默認從上向下 2、background: linear-gradient(to right, red , blue); 從左向右的漸變 3、background: linear-gradient(to bottom right, red , blue);從左上角到右下角/ 4、background: linear-gradient(180deg, red, blue);帶有指定角度的漸變 5、background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));使用透明色漸變， transparent透明色/

重複的線性漸變 background: repeating-linear-gradient(red, yellow 10%, green 20%);

徑向漸變 1、background: radial-gradient(red, green, blue);顏色結點均勻分布的徑向漸變： 2、 background: radial-gradient(red 5%, green 15%, blue 60%); 顏色節點分布不均勻 3、 background: repeating-radial-gradient(red, yellow 10%, green 15%); 重複的徑向漸變

設置形狀 shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。 形狀為圓形的徑向漸變： background: radial-gradient(circle, red, yellow, green);

css3中transform可以實現文字或影像的旋轉（rotate）、縮放(scale)、傾斜(skew)、移動(translate)的變形效果。  旋轉、縮放、傾斜和移動，這四種變形效果進行結合使用，並且使用的先後順序不同，頁面顯示的結果會有區別。 使用語法： transform:功能; -ms-transform:功能; / IE 9 / -moz-transform:功能; / Firefox / -webkit-transform:功能; / Safari 和 Chrome / -o-transform:功能; / Opera /

Tags:

VirMach 便宜 VPS