文单阅读

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5/SVG图片切换马赛克过渡动画</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
<style>
    HTML, BODY {
  height: 100%;
}

BODY {

}

svg {
  width: 800px;
  height: 532px;
  margin:80px auto;
}
</style>
  
</head>

<body style="width: 100%;height: 100%;padding-left: 500px;">


  <!-- Inspired by https://codepen.io/eeeps/pen/dqepQm -->
<div style="margin: 0 auto;">
<svg viewBox="0 0 800 532">
  <filter id="pixels" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-color="green" flood-opacity="1" x="0" y="0" width="1" height="1" result="flood"/>
    <feComposite 
      id="composite"
      in="SourceAlpha" in2="flood" operator="in" x="0" y="0" width="6" height="6" result="composite"/>
    <feTile x="0" y="0" width="1000" height="1000" in="composite" result="tile1"/>
    <feComposite in="SourceGraphic" in2="tile1" operator="in" result="composite1"/>
    <feMorphology 
    id="morphology"
    operator="dilate" radius="2" in="composite1" result="morphology"/>
  <feColorMatrix 
    id="colormatrix"
    type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="morphology" result="colormatrix"/>
</filter>
  
    <image 
    id="image"
    x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="http://blog.img.duanshuilu.com/zwlxf565656.png" filter="url(#pixels)"></image>
</svg>
</div> 
  
<script>
    var composite = document.querySelector('#composite');
var morphology = document.querySelector('#morphology');
var image = document.querySelector('#image');

var min = 2;
var max = 20;
var counter = min;
var step = 4;
var direction = 'forward';
var imagesCounter = 0;
var pausa = 2; // seconds

var images = [
'http://blog.img.duanshuilu.com/zwlxf565656.png',
'http://blog.img.duanshuilu.com/zwlxf565656.png',
'http://blog.img.duanshuilu.com/zwlxf565656.png',
'http://blog.img.duanshuilu.com/zwlxf565656.png',
'http://blog.img.duanshuilu.com/zwlxf565656.png',
'http://blog.img.duanshuilu.com/zwlxf565656.png'];


function changeSeed() {
  if (counter <= min) {
    image.setAttribute('filter', 'url(#pixels)');
  }

  if (direction === 'forward') {
    counter += step;

    if (counter >= max) {
      direction = 'backward';
      image.setAttribute('xlink:href', images[imagesCounter]);
      imagesCounter++;

      if (imagesCounter === images.length) {
        imagesCounter = 0;
      }
    }
  } else
  {
    counter -= step;

    if (counter <= min) {
      direction = 'forward';
    }
  }
  composite.setAttribute('width', counter);
  composite.setAttribute('height', counter);
  morphology.setAttribute('radius', Math.ceil(counter / 1.95));
  colormatrix.setAttribute('values', 1 - counter / max);

  var time = 75;

  if (counter <= min) {
    time = pausa * 1000;
    image.setAttribute('filter', 'none');
  }

  setTimeout(changeSeed, time);
}

window.requestAnimationFrame(changeSeed);
      //# sourceURL=pen.js
</script>




</body>

</html>
HTML5/SVG图片切换马赛克过渡动画