製造弧光使用CSS

Question

我是新來這個。我想製作一個類似here的時鐘。但他們已經使用了圖像。相反，我想利用ARC。有誰知道，我們如何創建一個弧線，也只使用CSS？考慮一個例子，我必須做一個15度的弧。任何類型的建議都非常感謝。

在此先感謝.....

Answer 1

我建議你使用SVG來做到這一點。標記相當簡單，但您需要留意，有四條不同的規則會影響兩端的哪一側凸起的弧線，並且凸起會嘗試採用「短路」或具有給定半徑的「長途」。

下面是一個例子。使用樣式表是這樣的：

.arc{ 
    fill:tan; 
    stroke:red; 
    stroke-width:4px; 
} 

使用如下的SVG路徑組合：

<svg width="100" height="100"> 
    <path d="M 10,40 A 50,50 0 0 1 90,70"/> 
</svg> 

總之在上面的例子中的命令是

• M（移動模式與絕對座標）
• 的x，y（這裏開始電弧這裏）
• A（與絕對coordina電弧模式TES）
• R1，R2（橢圓的兩個半徑圓弧善有善報。使用相同的值的兩倍爲圓形）
• θz旋轉（即橢圓形的旋轉。0是無旋轉）
• 大圓弧標誌（見下面的小提琴鏈接）
• 掃描標誌（見下面的小提琴鏈接）
• X，Y（其中電弧將結束）

我做了這個小提琴證明在運動的兩個標誌，這有助於我很多在決定使用哪些的所有不同的組合。 http://jsfiddle.net/rgbk/avpye8nm

W3C文檔在這裏：http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands他們將z旋轉描述爲「x軸旋轉」，這是錯誤的。

Answer 2

它是否必須是CSS？或者你可以使用HTL5畫布？

http://www.w3schools.com/tags/canvas_arc.asp

，那麼你可以使用帆布做的，而不是使用CSS動畫動畫...