svg过滤器对照片进行过滤变形效果代码-html代码-BFW代码库

svg过滤器对照片进行过滤变形效果代码

代码语言：html

代码描述：svg过滤器对照片进行过滤变形效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1rem;
  background: linear-gradient(#f8c8bf, #fcebe8);
}

img {
  display: block;
  filter: url("#ripple");
}
</style>



</head>

<body >
  <svg class="svg-filters" width="0" height="0" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<defs>
		<filter id="ripple">
			<feColorMatrix type="saturate" values="0" />
			<feGaussianBlur in="SourceGraphic" stdDeviation="25" />
			<feColorMatrix type="luminanceToAlpha" result="img" />

			<feComponentTransfer in="img" result="h1">
				<feFuncA type="table" tableValues="-9.0 10" />
			</feComponentTransfer>
			<feComponentTransfer in="img">
				<feFuncA type="table" tableValues="-8.5 10" />
			</feComponentTransfer>
			<feComposite in2="h1" result="a1" operator="out" />

			<feComponentTransfer in="img" result="h2">
				<feFuncA type="table" tableValues="-6.0 10" />
			</feComponentTransfer>
			<feComponentTransfer in="img">
				<feFuncA type="table" tableValues="-5.5 10" />
			</feComponentTransfer>
			<feComposite in2="h2" result="a2" operator="out" />

			<feComponentTransfer in="img" result="h3">
				<feFuncA type="table" tableValues="-4.0 10" />
			</feComponentTransfer>
			<feComponentTransfer in="img">
				<feFun.........完整代码请登录后点击上方下载按钮下载查看