conic-gradient

T型漸變

從中間12點位置順時針開始,設定角度和百分比都可以

background:conic-gradient(#e63946 0 40%, #026bdc 40% 70%,#ffb5a7 70% 100%);

background-image: conic-gradient(#69f, #fd44ff);

預設是角度為0,終點為360deg的形式過渡

如果給三個顏色

      background:conic-gradient(#e63946 , #026bdc,#ffb5a7);

預設是0-50%過渡,然後50%到100%過渡

修改起始角度

background-image: conic-gradient(from -90deg, #69f, #fd44ff);
 

我們發現角度會被修改到了-90deg的位置

修改圓錐中心

background-image: conic-gradient(from -90deg at 80px 120px, #69f, #fd44ff)

小案例

 .spinner{
      width: 100px;
      height: 100px;
      display: flex;
      max-width: 100px;
      position: relative;
      box-sizing: border-box;
      border-radius: 50%;
      margin-left:-25px;
      background:conic-gradient(transparent 0%, transparent 27%, #CD798F 27%, #92DFF0 38%, white 48%, transparent 48%, transparent 77%, #CD798F 77%, #92DFF0 88%, white 98%, transparent 98%);
      /*mix-blend-mode: color-dodge;*/
      animation: spin 4s linear infinite;
    }
    .spinner:before{
      content: '';
      position: absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:-1;
      margin:5px;
      border-radius: 50%;
      background-color: #fff;
    }
    @keyframes spin {
      0%{
        transform: rotateZ(0deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }

html

    <div class="spinner"></div>
 

重要程式碼

background:conic-gradient(transparent 0%, transparent 27%);
 顏色,度數

conic-gradient（）函式是CSS中的內建函式，用於將圓錐曲線漸變設定為背景影象。圓錐傾斜角從0度到360度開始。圓錐形是圓形的，並使用元素的中心作為色標的源點。

mix-blend-mode: color-dodge;

元素的內容應該與元素的直系父元素的內容和元素的背景如何混合

animation-direction: reverse;

反向執行動畫