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

代码语言：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;
          place-items: center;
          box-shadow: 20px 0 20px -25px rgba(0, 0, 0, 0.5);
        }
        body #inputWrap .spread {
          transition: 0.3s ease-in-out;
          opacity: var(--opacity);
          pointer-events: var(--pointer);
        }
        body #inputWrap > div {
          display: block;
          width: calc(100% - 4rem);
        }
        body #inputWrap > div .half {
          display: inline-block;
          width: 45%;
          text-align: center;
        }
        @media (max-width: 768px) {
          body #inputWrap > div .half {
            width: 100%;
          }
        }
        body input[type=range] {
          -webkit-appearance: none;
          background: transparent;
        }
        body input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
        }
        body input[type=range]:focus {
          outline: none;
        }
        body input[type=range]::-ms-track {
          width: 100%;
          cursor: pointer;
          background: transparent;
          border-color: transparent;
          color: transparent;
        }
        body input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
          height: 16px;
          width: 16px;
          border-radius: 50px;
          cursor: pointer;
          margin-top: -8px;
          background: #333;
        }
        body input[type=range]:focus::-webkit-slider-thumb:hover {
          background: #000;
        }
        body input[type=range]::-moz-range-thumb {
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          border: 1px solid #000000;
          height: 36px;
          width: 16px;
          border-radius: 3px;
          background: #ffffff;
          cursor: pointer;
        }
        body input[type=range]::-webkit-slider-runnable-track {
          width: 100%;
          height: 1px;
          cursor: pointer;
          background: #555;
          border-radius: 1.3px;
        }
        body input[type=range]:focus::-webkit-slider-runnable-track {
          background: #000;
        }
        body input[type=range]::-moz-range-track {
          width: 100%;
          height: 8.4px;
          cursor: pointer;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          background: #ccc;
          border-radius: 1.3px;
          border: 0.2px solid #010101;
        }
        body label {
          font-size: 0.75rem;
          font-weight: 900;
          display: block;
          width: 100%;
        }
        body label.file-upload {
          position: relative;
          font-size: 0.75rem;
          cursor: pointer;
          margin-bottom: 2rem;
          text-align: center;
          box-shadow: 0 0 0 1px #000;
          padding: 0.75rem 0.5rem;
          box-sizing: border-box;
        }
        body label.file-upload:hover {
          background: #000;
          color: #fff;
        }
        body label.file-upload input {
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;
          z-index: 10;
        }
        body input {
          width: 100%;
          position: relative;
          margin: 1rem 0 1.5rem;
        }
        body input[type=checkbox] {
          width: 20px;
          height: 20px;
          filter: saturate(0) contrast(2);
        }
        body svg {
          position: absolute;
          pointer-events: none;
        }
        body main {
          display: grid;
          place-items: center;
        }
        body #svgwrap {
          width: clamp(25vmin, 75vmin, 50vw);
          height: clamp(25vmin, 75vmin, 50vw);
          position: relative;
          overflow: hidden;
          background: #fff;
          box-shadow: 0 0 0 5px #000, 0 20px 20px -15px rgba(0, 0, 0, 0.75);
        }
        body #svgwrap:before, body #svgwrap:after {
          mix-blend-mode: var(--mix-blend);
          filter: var(--filter);
          content: "";
          position: absolute;
          width: 200%;
          height: 200%;
          left: -50%;
          top: -50%;
          background: var(--bg);
          -webkit-animation: var(--animation);
                  animation: var(--animation);
          transform: rotate(calc(var(--angle) * 1deg));
        }
        @-webkit-keyframes shift {
          from {
            background-position: 50% 0px;
          }
          to {
            background-position: 50% calc(60px * var(--totalspread));
          }
        }
        @keyframes shift {
          from {
            background-position: 50% 0px;
          }
          to {
            background-position: 50% calc(.........完整代码请登录后点击上方下载按钮下载查看