js+css实现图片马赛克幻灯片过渡动画效果代码-html代码-BFW代码库

js+css实现图片马赛克幻灯片过渡动画效果代码

代码语言：html

所属分类：幻灯片

代码描述：js+css实现图片马赛克幻灯片过渡动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">

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

BODY {

}

svg {
  width: 800px;
  height: 532px;
  margin:80px auto;
}

</style>

  
</head>

<body>


  <!-- Inspired by https://codepen.io/eeeps/pen/dqepQm -->

<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.........完整代码请登录后点击上方下载按钮下载查看