Question

Starcraft 2有一个很好的自动播放动画（http://youtu.be/p34SNJGmNE8?t=50s），我想在我的一个小工具上的刷新按钮上复制。

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

Answer 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动画移动框的尾随光晕。

是否有可能使用CSS3动画制作类似星际争霸2的自动叠加？

1 个答案: