È possibile creare una sovrascrittura automatica di tipo Starcraft2 utilizzando animazioni CSS3?

Question

Starcraft 2 ha una bella animazione di autocast (http://youtu.be/p34SNJGmNE8?t=50s) che voglio replicare sul pulsante di aggiornamento di uno dei miei widget.

Se il mio pulsante fosse circolare, sarebbe possibile utilizzare una trasformazione di orbita per fare l'animazione, ma cosa posso fare nel mio caso con un pulsante quadrato?

Answer 1

È abbastanza facile con l'animazione di fotogrammi chiave.

Sfortunatamente solo Firefox supporta l'animazione di pseudo elementi in questo momento, ma qui c'è uno example dell'effetto.

Funziona animando le coordinate pseudo-elemento posizionate in modo assoluto.

Ecco il codice necessario:

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

Si potrebbe anche animare la luce posteriore delle scatole in movimento con più box-shadows, forse.