css - 使用 CSS 创建这个旋转动画

Question

这是我想使用 CSS 制作的动画。

这是一个动画PNG。 Firefox 是我所知道的唯一可以显示动画的浏览器。请在 FireFox 中查看此动画，以便观看动画。我想尝试用 CSS 制作它，这样我就可以在更多浏览器中使用它，并且仍然获得真正的透明度(gif 动画无法提供)

<-- 这是其中一个点，可用于制作动画，而无需在 css 中创建点的阴影。

这把 fiddle http://jsfiddle.net/jvrvK/显示我到目前为止所拥有的。我有点像球体，但动画在 Chrome 中似乎不起作用，而且我对 CSS 动画的了解不足以在 PNG 中创建相同类型的旋转。

非常感谢您的帮助!

下面的 fiddle 代码:

<ul class="busy">
    <li class="busy-dot1"><b class="busy-dot-shine"></b></li>
    <li class="busy-dot2"><b class="busy-dot-shine"></b></li>
    <li class="busy-dot3"><b class="busy-dot-shine"></b></li>
    <li class="busy-dot4"><b class="busy-dot-shine"></b></li>
    <li class="busy-dot5"><b class="busy-dot-shine"></b></li>
</ul>

.busy {
    list-style: none;
    padding: 0;
    position: relative;
    transform-style: preserve-3d;
    animation: rot 4s linear infinite;
    width:100px;
}

.busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 {
    border-radius: 50%;
    display: inline-block;
    transform-style: preserve-3d;
    margin: 0 4px;
}

.busy-dot-shine {
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0));
    background-color: #193987;
    animation: rotr 4s linear infinite;
    height: 20px;
    width: 20px;
}

Answer 1

Chrome 可能对前缀很挑剔，请将 PrefixFree 库添加到您的代码中。您可以自己添加前缀，但我发现 PreFix Free 更容易。

//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js

http://jsfiddle.net/adrianjmartin/jvrvK/2/

另一种方法是使用 SVG: http://jsfiddle.net/adrianjmartin/AcvE5/3/