Có thể tạo lớp phủ tự động giống như Starcraft2 bằng hoạt ảnh CSS3 không?

Question

Starcraft 2 có hình động tự động đẹp (http://youtu.be/p34SNJGmNE8?t=50s) mà tôi muốn nhân rộng trên nút làm mới trên một trong các tiện ích của tôi.

Nếu nút của tôi là hình tròn, có thể sử dụng chuyển đổi quỹ đạo để thực hiện hoạt ảnh nhưng tôi có thể làm gì trong trường hợp của mình bằng nút hình vuông?

Answer 1

Khá dễ dàng với hoạt ảnh khung hình chính.

Thật không may chỉ Firefox hỗ trợ các phần tử giả hoạt hình tại thời điểm này, nhưng đây là một hiệu ứng example .

Nó hoạt động bằng cách làm động các tọa độ phần tử giả vị trí tuyệt đối.

Đây là mã cần thiết:

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

Bạn cũng có thể làm động ánh sáng dấu các hộp di chuyển với nhiều box-shadows, có lẽ.