0

我是新来的。我想制作一个与这里给出的时钟相似的时钟。但是他们使用了图像。相反，我想使用ARC。有谁知道，我们如何制作弧线，也只使用 css？考虑一个例子，我必须做一个 15 度的弧。非常感谢任何类型的建议。

提前致谢.....

4

2 回答 2

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（绝对坐标的圆弧模式）
  • r1,r2（圆弧环绕的椭圆的两个半径。对圆使用相同的值两次）
  • z 旋转（那个椭圆的旋转。0 是没有旋转）
  • 大弧形标志（见下面的小提琴链接）
  • 扫旗（见下面的小提琴链接）
  • x,y（圆弧结束的地方）

我制作了这个小提琴来演示这两个标志的所有不同组合在运动中这对我决定使用哪些标志有很大帮助。http://jsfiddle.net/rgbk/avpye8nm

W3C 文档在这里：http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands他们将 z 旋转描述为“x 轴旋转”，这是错误的。

于 2014-10-13T21:11:02.940 回答
0

它必须是 CSS 吗？或者你可以使用 HTL5 画布吗？

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

那么您可以使用该画布来制作动画，而不是使用 CSS 动画...

于 2013-06-12T12:13:06.600 回答