基于SVG的图片模糊水波纹特效

这是一款基于SVG的图片模糊水波纹特效。该特效使用SVG作为滤镜，为图片添加水波纹效果，在鼠标悬停在图片上面时，图片回复正常显示，效果非常炫酷。

使用方法

HTML代码

<div class="container">
    <div class="grid-container">
        <div class="grid-item photo1">
            <img class="filter-image" src="./img/1.jpg">
        </div>
        <div class="grid-item photo2">
            <img class="filter-image" src="./img/2.jpg">
        </div>
        <div class="grid-item photo3">
            <img class="filter-image" src="./img/3.jpg">
        </div>
    </div>
</div>
<svg>
    <defs>
        <filter id="crumple-effect-1">
            <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.1" numOctaves="5" result="turbulence">
                <animate attributeName="baseFrequency" values="0.1;0.3;0.6;1.0" keyTimes="0;0.5;0.75;1" dur="15s" repeatCount="indefinite" />
            </feTurbulence>
            <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0">
                <animate attributeName="scale" values="0;20;50;100" keyTimes="0;0.5;0.75;1" dur="60s" repeatCount="indefinite" />
            </feDisplacementMap>
        </filter>

        <filter id="crumple-effect-2">
            <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.02" numOctaves="5" result="turbulence">
                <animate attributeName="baseFrequency" values="0.1;0.2" keyTimes="0;1" dur="10s" repeatCount="indefinite" />
            </feTurbulence>
            <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0">
                <animate attributeName="scale" values="30;60" keyTimes="0;1" dur="10s" repeatCount="indefinite" />
            </feDisplacementMap>
        </filter>

        <filter id="crumple-effect-3">
            <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.02" numOctaves="5" result="turbulence">
                <animate attributeName="baseFrequency" values="0.6;0.3;0.2;0.1" keyTimes="0;0.5;0.75;1" dur="15s" repeatCount="indefinite" />
            </feTurbulence>
            <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0">
                <animate attributeName="scale" values="0;50;75;100" keyTimes="0;0.5;0.75;1" dur="60s" repeatCount="indefinite" />
            </feDisplacementMap>
        </filter>

    </defs>
</svg>
		

CSS代码

.container {
	height: 80vh;
	margin: 0;
	place-items: center;
	background-color: aliceblue;
}

.grid-container {
  display: grid;
  gap: 20px 20px;
  grid-template-columns: auto auto auto;
}

.grid-item {
  padding: 20px;
}

.filter-image {
  text-align: center;
	width: 30vw;
	height: 60vh;
	object-fit: cover;
	background: white;
	padding: 10px 10px 35px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	transition: all 0.15s linear;
	z-index: 0;
	position: relative;
	transform: rotate(4deg);
}

.photo1, photo2 {
	padding: 1rem;
	filter: drop-shadow(0 2px 1px darkgrey);
	display: inline-block;
}

.photo1 {
	filter: url(#crumple-effect-1);
}

.photo2 {
	filter: url(#crumple-effect-2);
}

.photo3 {
	filter: url(#crumple-effect-3);
}


.photo1:hover, .photo2:hover, .photo3:hover {
	filter: sepia(50%);
	transform: rotate(-6deg);
}
		

codepen网址：https://codepen.io/tommyho/pen/mdYJyvB