用CSS3创建这样的东西?

时间:2011-10-15 19:39:15

标签: javascript css css3

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

我想在不使用SVC或Canvas的情况下创建它。任何人都可以指出我做与css类似的例子的方向吗?

谢谢!

1 个答案:

答案 0 :(得分:1)

嗯,SVG肯定是这个(或画布,但我更喜欢SVG)的正确解决方案。 Raphael脚本甚至可以在IE的旧版本中使用,因为它在IE6 / 7/8中切换到VML,所以如果你试图避免使用SVG / Canvas,那么你就不必担心了。

但你问如何在没有他们的情况下做到这一点,所以我会看到我能做些什么......

有很多人使用纯CSS来演示绘制一些相当复杂的形状。例如,请参阅http://css-tricks.com/examples/ShapesOfCSS/

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

根据问题绘制同心圆将涉及多个彼此叠加的元素,每个元素的风格相似,但大小不同。

现在是棘手的一点。将它们从圆圈转变为弧线将变得更加困难。我能想到的唯一合理的方法就是在与背景颜色相同的圆圈上叠加一些元素,以遮挡圆圈的一部分。我们需要使用CSS transform来旋转它们,以便截止的角度是正确的。

所以可以做到。

动画它(当然和示例一样好)将是另一个数量级的难度,我甚至不想开始考虑它。请随时给我SVN。