如何创建装载点填充点背景作为动画？

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>