Возможно ли сделать наложение в стиле Starcraft2 с использованием анимации CSS3? - PullRequest
Новая
       19

Возможно ли сделать наложение в стиле Starcraft2 с использованием анимации CSS3?

5 голосов
/ 26 ноября 2011

Starcraft 2 имеет приятную анимацию авто-трансляции (http://youtu.be/p34SNJGmNE8?t=50s), которую я хочу скопировать на кнопку обновления на одном из моих виджетов.

Если бы моя кнопка была круглой, было бы возможно использовать орбитальное преобразование для анимации, но что я могу сделать в моем случае с квадратной кнопкой?

1 Ответ

2 голосов
/ 27 ноября 2011

Это довольно просто с анимацией по ключевым кадрам.

К сожалению, в настоящее время только 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;}

Вы также можете анимировать заднее свечение движущихся коробок с несколькими box-shadows, возможно.

...