如何創建加載程序填充點作爲動畫背景？

Question

這個img上的點應該填充背景。只有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>