Animation 是否可以使用CSS3动画制作类似Starcraft2的自动播放覆盖？

星际争霸2有一个很好的自动播放动画（），我想在我的一个小部件上的刷新按钮上复制它

---

如果我的按钮是圆形的，则可以使用动态观察变换来制作动画，但在我的情况下，使用方形按钮可以做什么？

使用关键帧动画非常简单

不幸的是，目前只有Firefox支持设置伪元素的动画，但下面是一个效果示例

它通过设置绝对定位伪元素坐标的动画来工作

以下是必要的代码：

 a {
 display:block; 
 height:50px; width:50px; 
 position:relative;}

 a:after,a:before{
 content:''; 
 width:5px; height:5px; 
 display:block; 
 position:absolute; 
 -moz-animation:  autocast 2s infinite;
 background:black;
 }

 @-moz-keyframes autocast {
    0%   {top:0;    left:0;}
    25%  {top:0;    left:45px;}
    50%  {top:45px; left:45px;}
    75%  {top:45px; left:0;}
    100% {top:0;    left:0;}
 }

 a:before{ -moz-animation-delay: 1s;}

---

您还可以使用多个

框阴影

为移动框的尾随光晕设置动画。

看起来不错，但看起来它也在使用贝塞尔曲线进行动画-在这种情况下，我认为作为线性变换效果更好。（您可以将读取

-moz动画：…

的行更改为读取

-moz动画：autocast 2s infinite linear

）