CSS圖形基礎：利用圓錐漸變繪制圖形

1．圓錐漸變

      在CSS中，除了線性漸變（linear-gradient）和徑向漸變（radial-gradient）外，還有一種漸變叫“圓錐漸變”。它是圍繞中心點按照扇形方向進行旋轉的漸變，而不是像徑向漸變那樣從中心點沿圓環向外慢慢輻射。

      圓錐漸變的調用格式為：

           background-image: conic-gradient(from angle at position, start-color, ..., stop-color )

      其中，參數from angle可選，表示起始的角度，默認為從上到下；position可選，給定圓錐錐點的位置；start-color定義開始顏色；stop-color定義結束顏色。

      設頁面中有<div class="shape"></div>，若定義.shape的樣式規則為：

  .shape

  {

     margin: 0 auto;

     width: 400px;

     height: 300px;

     border: 1px solid;

     background-image:conic-gradient(red , yellow);

  }

      可在頁面中顯示如圖1所示的圖案。圖1中圓錐漸變起始點是圖形中心，然后以順時針方向繞中心實現漸變效果，顏色從紅色開始，漸變轉為黃色。

 

圖1  紅色圓錐漸變為黃色

      若修改.shape樣式中background-image屬性定義為：

          background-image:conic-gradient(from 90deg ,red , yellow);

      則在頁面中顯示如圖2所示的圖案。在圖2中可以看出，相比於圖1漸變的起始角度旋轉了90deg。

 

圖2  紅色圓錐漸變為黃色（from 90deg）

      若修改.shape樣式中background-image屬性定義為：

          background-image:conic-gradient(at 20% 20%,red , yellow);

      則在頁面中顯示如圖3所示的圖案。在圖3中明顯看出漸變中心點往左上角方向移了。

圖3  漸變中心點at 20% 20%

      圓錐漸變可以指定多個顏色，若修改.shape樣式中background-image屬性定義為：

  .shape

  {

     margin: 0 auto;

     width: 400px;

     height: 300px;

     border: 1px solid;

     background-image:conic-gradient(red,orange,yellow,green,indigo,blue,violet);

  }

則在頁面中顯示如圖4所示的圖案。

圖4  七彩圓錐漸變

      圓錐漸變中指定的顏色可以使用透明度，例如若修改.shape樣式中background-image屬性定義為：

           background-image:conic-gradient(rgba(255,0,0,0), rgba(255,0,0,1));

      則在頁面中顯示如圖5所示的圖案。

圖5  使用了透明度的紅色圓錐漸變

       圓錐漸變中指定的顏色還可以定義停止位置，例如若修改.shape樣式中background-image屬性定義為：

             background-image:conic-gradient(red 15%, green 30%, blue 60%);

       則在頁面中顯示如圖6所示的圖案。

 

圖6  顏色結點不均勻分布

       若修改.shape樣式中background-image屬性定義為：

          background-image:conic-gradient(red 50%, yellow 50%);

       則均在頁面中顯示如圖7所示的圖案。此時，紅黃兩種顏色平分背景空間，取消了漸變效果。

 

圖7  半黃半紅

       若修改.shape樣式中background-image屬性定義為：

            background-image:conic-gradient(red 33%, yellow 33%, yellow 66%,blue 66%);

       則在頁面中顯示如圖8所示的圖案。

 

圖8  中心圓周上紅黃藍各占120deg

       若修改.shape樣式中background-image屬性定義為：

            background-image:conic-gradient(red 33%, yellow 66%,blue 66%);

       則在頁面中顯示如圖9所示的圖案。注意圖9與圖8的差別，圖8中的黃色區域在圖9中變成了紅色向黃色的圓錐漸變。

 

圖9  紅黃間圓錐漸變

        若修改.shape樣式中background-image屬性定義為：

             background-image:repeating-conic-gradient(red 10%, yellow 20%);

       則在頁面中顯示如圖10所示的圖案。

 

圖10  重復的圓錐漸變

       若修改.shape樣式中background-image屬性定義為：

              background-image:repeating-conic-gradient(red 0, red 11%,yellow 11%,yellow 22%, blue 22%, blue 33%);      

       則在頁面中顯示如圖11所示的圖案。

 

圖11  紅黃藍三色圖（1）

       若修改.shape樣式中background-image屬性定義為：

             background-image:repeating-conic-gradient(red 0 10deg,yellow 10deg 20deg,blue 20deg 30deg);

       則在頁面中顯示如圖12所示的圖案。

圖12  紅黃藍三色圖（2）

       需要說明的是：目前不是所有的主流瀏覽器都支持圓錐漸變。本文中的圖形效果在“360安全瀏覽器12”中會得到呈現，但IE 11和Microsoft Edge上會不呈現。其他的主流瀏覽器沒有進行一一測試，請讀者自行測試好了。

2．利用圓錐漸變繪制圖形

       利用圓錐漸變可以繪制出圖形，下面給出一些示例。

（1）餅圖。

若定義.shape的樣式規則為：

  .shape

  {

    margin: 50px auto;

    width: 200px;

    height: 200px;

    border-radius: 50%;

    background: conic-gradient(red 30%,yellow 30%,yellow 70%,blue 70%);

  }

可在頁面中顯示如圖13所示的餅圖圖案。

 

圖13  餅圖

       若修改.shape樣式中background-image屬性定義為：

             background: conic-gradient(red 0 50deg,orange 0 100deg,yellow 0 150deg,

                                           green 0 200deg,indigo 0 250deg,blue 0  300deg,violet 0);

       可在頁面中顯示如圖14所示的七彩餅圖圖案。

  

圖14  七彩餅圖

       在conic-gradient 函數中，0 50deg的區間使用red，0 100deg的區間使用orange、…、0  360deg的區間使用violet，而且，先定義的顏色的層疊在后定義的顏色之上。因此，實際上0 50deg的區間使用red，50deg 100deg的區間使用orange、…、300deg 360deg的區間使用violet。這種寫法比較偷懶，無需具體計算，只需給出各顏色的終止角度即可。

       （2）條紋。

若定義.shape的樣式規則為：

  .shape

  {

    margin: 50px auto;

    width: 200px;

    height: 200px;

    border: 1px solid;

    border-radius: 50%;

background-image:repeating-conic-gradient(red 0 50%,yellow 50% 100%);  

    background-size:50px 50px;

  }

可在頁面中顯示如圖15所示的垂直條紋圖案。

圖15  圓內垂直條紋

       若修改.shape樣式中background-image屬性定義為：

            background-image:repeating-conic-gradient(from 90deg, red 0 50%,yellow 50% 100%);

       可在頁面中顯示如圖16所示的水平條紋圖案。

 

圖16  圓內水平條紋

       （3）背景圖案。

若定義.shape的樣式規則為：

  .shape

  {

    margin: 50px auto;

    width: 200px;

    height: 200px;

    border: 1px solid;

    background: conic-gradient(from -45deg,#f00 0 180deg,#ff0 0);

    background-size:25px 50px;

  }

可在頁面中顯示如圖17所示的背景圖案。

 

圖17  背景圖案（1）

若定義.shape的樣式規則為：

  .shape

  {

    margin: 50px auto;

    width: 200px;

    height: 200px;

    border: 1px solid;

    background: conic-gradient(from 60deg,#f00 0 120deg,  #ff0 0 240deg,#00f 0);

    background-size:50px 50px;

  }

可在頁面中顯示如圖18所示的背景圖案。

圖18  背景圖案（2）

若定義.shape的樣式規則為：

  .shape

  {

    margin: 50px auto;

    width: 200px;

    height: 200px;

    border: 1px solid;

    border-radius: 50%;

    background-image:repeating-conic-gradient(red 0 33.3%,yellow 0 66.7%,blue 0 100%);  

    background-size:50px 50px;

  }

可在頁面中顯示如圖19所示的圓形背景圖案。

 

圖19  圓形背景圖案

若定義.shape的樣式規則為：

  .shape

  {

    margin: 50px auto;

    width: 200px;

    height: 200px;

    border: 1px solid;

    background: conic-gradient(#f00 0 90deg,  #ff0 0 180deg,#f0f 0 270deg,#00f 0);

    background-size:25px 25px;

  }

可在頁面中顯示如圖20所示的背景圖案。

圖20  背景圖案（3）

若定義.shape的樣式規則為：

  .shape

  {

    margin: 50px auto;

    width: 200px;

    height: 200px;

    border: 1px solid;

    background: conic-gradient(#f00 0 45deg,#ff0 0 90deg,#0f0 0 135deg,#00f 0 180deg,

                   #f00 0 225deg,#ff0 0 270deg,#0f0 0 315deg,#00f 0 360deg);

    background-size:50px 50px;

  }

可在頁面中顯示如圖21所示的背景圖案。

 

圖21  背景圖案（4）

若定義.shape的樣式規則為：

  .shape

  {

     margin: 0 auto;

     width: 400px;

     height: 400px;

     border: 1px solid;

     background:conic-gradient(#fff 90deg, #000 90deg 180deg,

#fff 180deg 270deg, #000 270deg);

     background-size: 100px 100px;

  }

可在頁面中顯示如圖22所示的國際象棋棋盤圖。

 

圖22  國際象棋棋盤

若定義.shape的樣式規則為：

  .shape

  {

     width: 200px;

     height: 200px;

     background: conic-gradient(#000 0, #000 12.5%, #fff 12.5%, #fff 37.5%,

           #000 37.5%, #000 62.5%, #fff 62.5%, #fff 87.5%, #000 87.5%,#000 0);

     border: 1px solid #000;

     background-size: 50px 50px;

  }

或者

  .shape

  {

     width: 200px;

     height: 200px;

     background: repeating-conic-gradient(#000 0, #000 12.5%, #fff 12.5%, #fff 37.5%,#000 37.5%,#000 50%);

     border: 1px solid #000;

     background-size: 50px 50px;

  }

均可在頁面中顯示如圖23所示的圖形。

 

圖23  菱形的平鋪

（4）SierPinski地毯。

若定義.shape的樣式規則為：

   .shape

  {

     margin: 50px auto;

     width: 200px;

     height: 200px;

     background: conic-gradient(from 270deg at calc(100% / 3) calc(100% / 3),

                      #f00 90deg,  transparent 0 )

                 calc(200px / 3) calc(200px / 3) / 100% 100% ,

                 conic-gradient(from 270deg at calc(100% / 3) calc(100% / 3),

                      #f00 90deg,  transparent 0 )

                 calc(100% / 6) calc(100% / 6) / calc(100% / 3) calc(100% / 3),

                 conic-gradient(from 270deg at calc(100% / 3) calc(100% / 3),

                      #f00 90deg,  transparent 0 )

                 calc(100% / 6) calc(100% / 6) / calc(100% / 9) calc(100% / 9);

     border: 1px solid #000;

  }

可在頁面中顯示如圖24所示的SierPinski地毯圖形。

 

圖24  SierPinski地毯

3．圓錐漸變在動畫制作中的應用實例

      利用圓錐漸變繪制圖形，定義適當的關鍵幀，可以實現動畫效果。

（1）Loading動畫。

例如，制作如圖25所示的Loading動畫效果。

 

圖25  Loading動畫效果

      圖25中的Loading圓環其實就是一個圓錐漸變，且使用了CSS遮罩屬性只讓外圈25%的范圍顯示，定義關鍵幀讓圓環旋轉起來，Loading圓環動畫效果就出現了。

      編寫的HTML文件如下。

<!DOCTYPE html>
<html>
<title>Loading動畫</title>
<head>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape
  {
    margin: 50px auto;
    width: 200px; 
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(#f00, 30%, white);
    -webkit-mask-image: radial-gradient(closest-side, transparent 75%, black 76%);
    mask-image: radial-gradient(closest-side, transparent 75%, black 76%);
    animation: spin 1s linear infinite reverse;
  }
  @keyframes spin 
  {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>
<div class="container">
   <div class="shape"></div>
</div>
</body>
</html>

      （2）旋轉的餅圖。

      編寫的HTML文件如下。

<!DOCTYPE html>
<html>
<title>旋轉的餅圖</title>
<head>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
   .shape 
  {
     margin: 50px auto;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     background: conic-gradient(red 0 50deg,orange 0 100deg,yellow 0 150deg,
                        green 0 200deg,indigo 0 250deg,blue 0  300deg,violet 0);
     animation:rotate 2s linear infinite;
  }
  @keyframes rotate
  {
      0%   { transform: rotate(0deg); }
      100% { transform:rotate(360deg); }
  }
</style>
</head>
<body>
<div class="container">
   <div class="shape"></div>
</div>
</body>
</html>

       在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現出如圖26所示的動畫效果。

 

圖26  旋轉的餅圖

      若編寫的HTML文件如下。

<!DOCTYPE html>
<html>
<title>旋轉的放射線</title>
<head>
<style>
  .container
  {  
    position: relative;
    margin: 50px auto;
    width: 300px;
    height:200px;
    background:#d8d8d8;
    overflow:hidden;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
   .shape 
  {
     position: absolute;
     top:-100px;
     left:-150px;
     width: 600px;
     height: 400px;
     background: repeating-conic-gradient(red 0 10deg,orange 0 20deg,yellow 0 30deg,
                        green 0 40deg,indigo 0 50deg,blue 0 60deg);
     animation:rotate 2s linear infinite;
  }
  @keyframes rotate
  {
      0%   { transform: rotate(0deg); }
      100% { transform:rotate(360deg); }
  }
</style>
</head>
<body>
<div class="container">
   <div class="shape"></div>
</div>
</body>
</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現出如圖27所示的動畫效果。

 

圖27  旋轉的放射線