javascript - 用 CSS3 创建这样的东西？

Question

http://raphaeljs.com/polar-clock.html

我想在不使用 SVC 或 Canvas 的情况下创建它。谁能指出我用 css 做类似事情的例子的方向？

谢谢!

Answer 1

好吧，SVG 显然似乎是对此(或 Canvas ，但我更喜欢 SVG)的正确解决方案。 Raphael 脚本甚至可以在旧版本的 IE 中工作，因为它在 IE6/7/8 中切换到 VML，因此如果您因此而试图避免使用 SVG/Canvas，则无需担心。

但是你问的是没有它们怎么办，所以我看看我能做什么...

有许多人演示了使用纯 CSS 绘制一些非常复杂的形状。参见 http://css-tricks.com/examples/ShapesOfCSS/例如。

使用纯 CSS/HTML，绘制曲线的唯一现实方法是使用 border-radius 样式。问题示例中的圆可以使用带有 border-radius 和粗边框的方形元素来实现。

根据问题绘制同心圆将涉及许多元素层叠在一起，每个元素的样式相似，但大小不同。

现在是棘手的一点。将它们从圆形变成弧形会更难。我能想到的唯一明智的方法是在与背景颜色相同的圆圈顶部添加更多元素，以遮盖圆圈的一部分。我们需要使用 CSS transform 来旋转它们，以便切割的 Angular 正确。

所以这是可以做到的。

动画化(当然和示例中一样好)将是另一个数量级的困难，我什至不想开始考虑它。随时给我 SVN。