jquery - 通过绘图笔划路径的 CSS3 动画

Question

如果有人知道如何使用 css3 通过绘制笔划路径为元素设置动画，请帮助我。

我需要穿过黄线的小盒子。请看下面的演示，你会得到我想要的。

DEMO

http://jsfiddle.net/w9aX6/

Answer 1

我知道这个答案已经得到解答，但我找到了一个很好的例子，它需要更少的帧，从而获得更好的性能。

---

您要创建的核心结构实际上(几乎)与您创建时钟时相同。

您期望此基本 HTML 结构的位置:

<div id="clock">
    <div id="hand">
        <div id="topHand"></div>
    </div>    
</div>

我使用了 center tricks of css-tricks将“指针”精确地置于时钟元素的左中间。

我们只是用 transform: rotateZ 为手做动画。

Here an example

您可以变换时钟，使其产生 3D 旋转的错觉，因此看起来像一个椭圆形。 您可以使用 -webkit-transform: rotateX() rotateY(); 请注意，这定义了您的椭圆形

现在我们需要摆脱它是 3D 的错觉。

您只需取消框上的 rotate 属性即可:

@-webkit-keyframes rotateFix {
    from {
        -webkit-transform: rotateX(90deg) rotateY(0deg);
    }
    to {
        -webkit-transform: rotateX(90deg) rotateY(-360deg);
    }
}

使用时不要忘记使用 -webkit-transform-style: preserve-3d;。

jsFiddle

---

我做的另一个例子，我使用了完整的宽度和高度而不是笔画:

jsFiddle

我将路径框设为半透明，这样您就可以看到形状和实际移动

来源:How to make an atom like animation using CSS3 animations?