當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

CSS图形基础：利用圆锥渐变绘制图形

發(fā)布時間：2023/12/15 综合教程 43 生活家

生活随笔收集整理的這篇文章主要介紹了 CSS图形基础：利用圆锥渐变绘制图形小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1．圓錐漸變

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

圓錐漸變的調(diào)用格式為：

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

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

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

.shape

{

margin: 0 auto;

400px;

height: 300px;

border: 1px solid;

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

}

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

圖1 紅色圓錐漸變?yōu)辄S色

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

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

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

圖2 紅色圓錐漸變?yōu)辄S色（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;

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 顏色結(jié)點不均勻分布

若修改.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中的黃色區(qū)域在圖9中變成了紅色向黃色的圓錐漸變。

圖9 紅黃間圓錐漸變

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

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

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

圖10 重復(fù)的圓錐漸變

若修改.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”中會得到呈現(xiàn)，但IE 11和Microsoft Edge上會不呈現(xiàn)。其他的主流瀏覽器沒有進行一一測試，請讀者自行測試好了。

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

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

（1）餅圖。

若定義.shape的樣式規(guī)則為：

.shape

{

margin: 50px auto;

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

（2）條紋。

若定義.shape的樣式規(guī)則為：

.shape

{

margin: 50px auto;

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 圓內(nèi)垂直條紋

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

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

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

圖16 圓內(nèi)水平條紋

（3）背景圖案。

若定義.shape的樣式規(guī)則為：

.shape

{

margin: 50px auto;

200px;

height: 200px;

border: 1px solid;

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

background-size:25px 50px;

}

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

圖17 背景圖案（1）

若定義.shape的樣式規(guī)則為：

.shape

{

margin: 50px auto;

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的樣式規(guī)則為：

.shape

{

margin: 50px auto;

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的樣式規(guī)則為：

.shape

{

margin: 50px auto;

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的樣式規(guī)則為：

.shape

{

margin: 50px auto;

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的樣式規(guī)則為：

.shape

{

margin: 0 auto;

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的樣式規(guī)則為：

.shape

{

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

{

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的樣式規(guī)則為：

.shape

{

margin: 50px auto;

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．圓錐漸變在動畫制作中的應(yīng)用實例

利用圓錐漸變繪制圖形，定義適當(dāng)?shù)年P(guān)鍵幀，可以實現(xiàn)動畫效果。

（1）Loading動畫。

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

圖25 Loading動畫效果

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

編寫的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>

View Code

（2）旋轉(zhuǎn)的餅圖。

編寫的HTML文件如下。

<!DOCTYPE html>
<html>
<title>旋轉(zhuǎn)的餅圖</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>

View Code

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

圖26 旋轉(zhuǎn)的餅圖

若編寫的HTML文件如下。

<!DOCTYPE html>
<html>
<title>旋轉(zhuǎn)的放射線</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>

View Code

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

圖27 旋轉(zhuǎn)的放射線

總結(jié)

以上是生活随笔為你收集整理的CSS图形基础：利用圆锥渐变绘制图形的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： wpfdiagram 学习教学_开启双
下一篇： cmd 切换目录_Linux Shell