svg+js实现可调节filter滤镜效果代码-html代码-BFW代码库

svg+js实现可调节filter滤镜效果代码

代码语言：html

所属分类：其他

代码描述：svg+js实现可调节filter滤镜效果代码，可实现对照片的滤镜，条纹等效果。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        body {
          height: 100vh;
          width: 100vw;
          overflow: hidden;
          display: grid;
          place-items: center;
          --filter: url(#distort);
          --spread: 1;
          --opacity: 1;
          --angle: 0;
          --shift: hidden;
          --pointer: all;
          --pixelspread: 1;
          --totalspread: calc(var(--spread) * var(--pixelspread));
          --img: url(https://assets.codepen.io/383755/fieri7.jpg) 50% 0px / auto 50vw;
          font-family: "Futura";
          --paused: paused;
          --color: #000;
          --animation: shift calc(1s + (1s * var(--totalspread))) linear infinite
            var(--paused);
          --bg: repeating-linear-gradient(
            var(--color) calc(5px * var(--totalspread)),
            transparent calc(5px * var(--totalspread)),
            transparent calc(10px * var(--totalspread)),
            var(--color) calc(10px * var(--totalspread)),
            var(--color) calc(15px * var(--totalspread))
          );
        }
        body * {
          box-sizing: border-box;
        }
        body.class-9 {
          --color: #ff474b;
          --mix-blend: difference;
          --shift: visible;
        }
        body.class-8 {
          --pixelspread: 3;
          --filter: url(#distort) url(#pixelate);
        }
        body.class-7 {
          --shift: hidden;
          --mix-blend: none;
          --animation: bgshift 5s linear infinite var(--paused);
          --bg: var(--img);
          --opacity: 0.25;
          --pointer: none;
        }
        body.class-6 {
          --paused: running;
        }
        body.class-6:not(.class-7) .shift {
          opacity: 1;
          pointer-events: all;
        }
        body .shift {
          opacity: 0.25;
          pointer-events: none;
        }
        body #wrap {
          width: 100vw;
          height: 100vh;
          position: relative;
          display: grid;
          grid-template-columns: clamp(150px, 25%, 25%) clamp(300px, 75%, 75%);
        }
        body #inputWrap {
          position: relative;
          z-index: 10;
          background: #efefef;
          display: grid;
          pla.........完整代码请登录后点击上方下载按钮下载查看