Jquery/CSS "Fan Out"动画

Question

一直在尝试解决这个问题，但被难住了!

我想用 Jquery/CSS 创建一个动画，其中一堆图像旋转并创建一个圆弧。我认为最简单的方法是堆叠它们，然后从中心旋转它们，如下图所示。

我希望所有四张图片(只有四张，因为第一张留在原处)同时以相同的速度旋转，但在 45、90、135 和 180 度处停止。

如果有人能为我指出正确的方向，我将不胜感激。

Answer 1

您实际上不需要为此使用 jQuery，因为使用 css 动画您可以为事物设置旋转。只需创建您喜欢的形状/图像，然后为其设置旋转。

.spin {
    animation: spin 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

或者，如果您需要多行淡入/淡出，您可以将 CSS 中的 from/to 替换为多个百分比断点，使其在动画生命周期的不同点发生变化。查看我发现的这些示例动画，似乎有您要找的东西。 https://projects.lukehaas.me/css-loaders/