創建自定義樣式餅圈

我試圖削減片出一個圓圈，但它被證明是難度比我原來預期的...創建自定義樣式餅圈

最好，我不想使用谷歌圖表和任何其他等價物，因爲我需要儘可能多地控制此圓的樣式（最終結果是加載環）。我還需要能夠使用jQuery或CSS對片的大小進行動畫處理。

請原諒我，但我沒有得到很遠，這是我的全部：

我關心的圓圈是#layer_2和#layer_3。下面是眼前這個圈子代碼：

#layer_2 { 
 
    border-radius: 50%; 
 
    width: 212px; 
 
    height: 212px; 
 
    margin: 14px; 
 
    background: #5c00d2; 
 
    background: -moz-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #5c00d2), color-stop(100%, #d586f4)); 
 
    background: -webkit-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    background: -o-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    background: -ms-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    background: linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5c00d2', endColorstr='#d586f4', GradientType=1); 
 
    -webkit-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5); 
 
    -moz-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5); 
 
    box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5); 
 
} 
 
#layer_3 { 
 
    border-radius: 50%; 
 
    width: 212px; 
 
    height: 212px; 
 
    margin: 0; 
 
    background: transparent; 
 
    -webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3); 
 
    -moz-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3); 
 
    box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3); 
 
}

<div id="layer_2"> 
 
    <div id="layer_3"></div> 
 
</div>

我想最終的結果看起來與此類似：

來源

2015-07-28 Ben Carey

如果不使用canvas或svg元素，這將非常困難。 – Shomz

@Shomz我認爲可能是這樣的:-(Canvas和SVG是我沒有經驗的一件事，難麼？ –

@Shomz我傾向於同意，你不能在CSS中這樣做。我認爲使用畫布會更快 – Mouser

您好我想這會幫助你找出問題，但我不知道如何調整梯度請參閱鏈接 https://jsfiddle.net/w0yu95u3/3/ 更改兩個wedge含義.container1 .wedge和.container2 .wedge要更改transform: rotateZ(N)，但請記住，您必須將其合併到圓周側的兩個部分。只是檢查它。

這裏是主要的資源 https://cssanimation.rocks/watch/

來源

2015-07-28 10:51:40 rana7cse

謝謝你，我會有一個遊戲，看看我是否成功 –

這將是很好，如果你可以結合它的梯度。 – rana7cse

你也可以看到這個鏈接[pie-charts-with-css]（http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/） – rana7cse

試試這個

layer_2

background-image: 
    linear-gradient(-90deg, transparent 50%, #5c00d2 50%), 
    linear-gradient(200deg, #5c00d2 50%, transparent 50%);

DEMO

來源

2015-07-28 11:41:12

這很棒，但不幸的是我無法讓它與漸變一起工作:-(+1爲努力 –

創建自定義樣式餅圈

回答

layer_2

相關問題