애니메이션으로 도트 배경을 채우는 로더를 만드는 방법은 무엇입니까?

Question

이 그림에있는 점들이 배경을 채워야합니다. jquery 애니메이션 만. 이것을 만드는 방법? 캔버스? 어떤 아이디어?

Answer 1

시도하십시오. jsfiddle.net을 사용하면 불투명도를 변경하는 방법과시기를 정의하여 논리를 간단히 변경할 수 있습니다.

는 CSS

.circleBase { 
    border-radius: 50%; 
    behavior: url(PIE.htc); 
    /* remove if you don't care about IE8 */ 
    opacity: 0; 
    // filter: alpha(opacity=0); /* For IE8 and earlier */ 
} 

.type1 { 
    width: 100px; 
    height: 100px; 
    background: yellow; 
    border: 3px solid red; 
} 

.type2 { 
    width: 50px; 
    height: 50px; 
    background: #ccc; 
    border: 3px solid #000; 
} 

.type3 { 
    width: 500px; 
    height: 500px; 
    background: aqua; 
    border: 30px solid blue; 
} 

JS

$('.circleBase').each(function(index){ 

    // add your opacity logic here - when and how to change it 
    var el = this; 
    setTimeout(function(){ 
     $(el).fadeTo('slow', 0.8); 
    }, Math.floor(Math.random() * 1000)) 
}) 

HTML

<div class="circleBase type1"></div> 

<div class="circleBase type2"></div> 
<div class="circleBase type2"></div> 

<div class="circleBase type3"></div>