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" />

                        &l.........完整代码请登录后点击上方下载按钮下载查看