0

私はこれが初めてです。ここにあるような時計を作りたいです。しかし、彼らは画像を使用しています。代わりにARCを利用したいと思います。css だけを使用してアークを作成するにはどうすればよいか、誰にもわかりませんか? 15 度の円弧を作成する必要がある例を考えてみましょう。どんな種類の提案も大歓迎です。

前もって感謝します.....

4

2 に答える 2

1

これを行うには SVG を使用することをお勧めします。マークアップは非常に単純ですが、2 つの端点のどちら側がレイで弧の膨らみを指すか、および膨らみが「短い道」をたどろうとするか、指定された半径の「長い道のり」。

例を次に示します。次のようなスタイルシートを使用します。

.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 (絶対座標の円弧モード)
  • r1,r2 (円弧が一周する楕円の 2 つの半径。円には同じ値を 2 回使用)
  • z 回転 (その楕円の回転。0 は回転なし)
  • 大きな円弧フラグ (下のフィドル リンクを参照)
  • スイープ フラグ (以下のフィドル リンクを参照)
  • x,y (円弧が終了する場所)

私はこのフィドルを作成して、2 つのフラグのさまざまな組み合わせをすべて示し、どちらを使用するかを決定するのに大いに役立ちました。http://jsfiddle.net/rgbk/avpye8nm

W3C ドキュメントはこちら: http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands z 回転を "x-axis-rotation" と記述していますが、これは間違っています。

于 2014-10-13T21:11:02.940 に答える
0

それは CSS である必要がありますか？またはHTL5キャンバスを使用できますか？

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

次に、CSSアニメーションを使用する代わりに、そのキャンバスを使用してアニメーションを実行できます...

于 2013-06-12T12:13:06.600 に答える