是否可以使用 CSS3 动画制作类似 Starcraft2 的自动覆盖？答案

【问题标题】：Is it possible to make a Starcraft2-like autocast overlay using CSS3 animations?是否可以使用 CSS3 动画制作类似 Starcraft2 的自动覆盖？
【发布时间】：2011-11-27 05:43:12
【问题描述】：

星际争霸 2 有一个不错的自动播放动画 (http://youtu.be/p34SNJGmNE8?t=50s)，我想在我的一个小部件上的刷新按钮上复制它。

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

【问题讨论】：

标签： animation css overlay

【解决方案1】：

关键帧动画相当容易。

很遗憾，目前只有 Firefox 支持动画伪元素，但这里有一个 example 的效果。

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

这里是必要的代码：

 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;}

也许您还可以使用多个 box-shadows 为移动框的尾随发光设置动画。

【讨论】：

看起来不错，但它看起来也使用贝塞尔曲线进行动画 - 在这种情况下，我认为它作为线性变换会更好。（您可以将-moz-animation: ... 改为-moz-animation: autocast 2s infinite linear）