SOURCE

window.onload = function() {
  var imgCon = document.getElementById('imgCon') var baseImgUrl = 'http://lenkuntang.cn/pdf/imgs/000';
  var winH = window.innerHeight;
  var curIdx = 1,
  maxImg = 7;
  generateFirstImg(curIdx++, function() {
    document.getElementById('container').remove() if (imgCon.offsetHeight < winH) {
      generateFirstImg(curIdx++, function() {
        renderRemainImg(curIdx++)
      })
    } else {
      renderRemainImg(curIdx++)
    }
  })

  function generateFirstImg(idx, cb) {
    var img = new Image();
    // img.style.width = '100%';
    img.src = baseImgUrl + idx + '.jpg'img.onload = function() {
      imgCon.appendChild(img) img.style.cssText += 'filter: blur(0px); -webkit-filter: blur(0px); -ms-filter: blur(0px)';
      if (cb) cb()
    }
  }

  function renderRemainImg(idx) {
    var imgDiv = document.createElement('div');
    imgDiv.id = 'imgDiv';
    var j = idx;
    while (j < 8) { (function(tempIdx) {
        var img = new Image();
        img.style.width = '100%';
        img.dataset.imgSrc = tempIdx img.src = baseImgUrl + idx + '.jpg'imgDiv.appendChild(img)
      })(j++)
    }
    imgCon.appendChild(imgDiv) if (imgCon.getBoundingClientRect) {
      var imgRem = document.getElementById('imgDiv').getElementsByTagName('img');
      window.onscroll = function() {
        throttle(function() {
          responsiveImgByBound(imgRem)
        },
        1000, 300)()
      }
    } else {
      window.onscroll = function() {
        responsiveImg(imgRem)
      }
    }
  }

  /**
             * 函数节流方法
             * @param Function fn 延时调用函数
             * @param Number delay 延迟多长时间
             * @param Number atleast 至少多长时间触发一次
             * @return Function 延迟执行的方法
             */
  var throttle = function(fn, delay, atleast) {
    var timer = null;
    var previous = null;

    return function() {
      var now = +new Date();

      if (!previous) previous = now;

      if (now - previous > atleast) {
        fn();
        // 重置上一次开始时间为本次结束时间
        previous = now;
      } else {
        clearTimeout(timer);
        timer = setTimeout(function() {
          fn();
        },
        delay);
      }
    }
  };

  function responsiveImgByBound(imgObj) {
    Array.prototype.forEach.call(imgObj, function(item, idx) {
      var bottomDis = item.getBoundingClientRect().bottom - item.offsetHeight - winH;
      if (bottomDis < 0) {
        item.style.cssText += 'filter: blur(0px); -webkit-filter: blur(0px); -ms-filter: blur(0px)';
        item.src = baseImgUrl + item.dataset.imgSrc + '.jpg';
      }
    })
  }
}

<div class="container" id="container">
  <div class="dot dot-1">
  </div>
  <div class="dot dot-2">
  </div>
  <div class="dot dot-3">
  </div>
</div>
<div style="height: 0px; width: 0px; overflow: hidden;">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7"
        />
      </filter>
    </defs>
  </svg>
</div>
<div id="imgCon" class="img-con">
</div>

body,
html {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.container {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  filter: url('#goo');
  animation: rotate-move 2s ease-in-out infinite;
}

.dot {
  width: 70px;
  height: 70px;
  border-radius: 80%;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.dot-3 {
  background-color: #f74d75;
  animation: dot-3-move 2s ease infinite;
}

.dot-2 {
  background-color: #10beae;
  animation: dot-2-move 2s ease infinite;
}

.dot-1 {
  background-color: #ffe386;
  animation: dot-1-move 2s ease infinite;
}

@keyframes dot-3-move {
  20% {
    transform: scale(1)
  }
  45% {
    transform: translateY(-18px) scale(.45)
  }
  60% {
    transform: translateY(-40px) scale(.45)
  }
  80% {
    transform: translateY(-40px) scale(.45)
  }
  100% {
    transform: translateY(0px) scale(1)
  }
}

@keyframes dot-2-move {
  20% {
    transform: scale(1)
  }
  45% {
    transform: translate(-16px, 12px) scale(.45)
  }
  60% {
    transform: translate(-40px, 40px) scale(.45)
  }
  80% {
    transform: translate(-40px, 40px) scale(.45)
  }
  100% {
    transform: translateY(0px) scale(1)
  }
}

@keyframes dot-1-move {
  20% {
    transform: scale(1)
  }
  45% {
    transform: translate(16px, 12px) scale(.45)
  }
  60% {
    transform: translate(40px, 40px) scale(.45)
  }
  80% {
    transform: translate(40px, 40px) scale(.45)
  }
  100% {
    transform: translateY(0px) scale(1)
  }
}

@keyframes rotate-move {
  55% {
    transform: rotate(0deg)
  }
  80% {
    transform: rotate(360deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

.img-con img {
  width: 100%;
  -webkit-transition: filter .3s ease-out 0s;
  -moz-transition: filter .3s ease-out 0s;
  transition: filter .3s ease-out 0s;
  filter: blur(10px);
  -ms-filter: blur(10px);
  -webkit-filter: blur(10px);
}