svg湍流滤波器实现文字滤波变形效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg湍流滤波器实现文字滤波变形效果代码，可以调节下面的四个参数改变效果。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">



    <style>
        :root {
          --color-surface: Black;
          --color-background: PaleGoldenRod;
        }
        
        /* Box sizing rules */
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        
        /* Remove default margin */
        body,
        h1,
        h2,
        h3,
        h4,
        p,
        figure,
        blockquote,
        dl,
        dd {
          margin: 0;
          font-size: 100%;
        }
        
        html {
          height: 100vh;
          line-height: 1.3;
          font-size: 87.5%;
          font-weight: 600;
          text-transform: uppercase;
          font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
            "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
            "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
          display: grid;
          place-items: center;
          color: var(--color-surface);
          background-color: var(--color-background);
        }
        
        body {
          padding: 2rem;
          max-width: 74rem;
        }
        
        ::selection {
          background: var(--color-surface);
          color: var(--color-background);
        }
        
        *:focus {
          outline: none;
        }
        
        *:focus-visible {
          outline: 3px solid currentColor;
          outline-offset: 3px;
        }
        
        h1 {
          margin-bottom: 2rem;
        }
        
        p {
          font-size: 4rem;
          font-weight: normal;
          filter: url(#filter);
          border: 3px solid currentColor;
          padding: 3rem;
          font-family: "Bebas Neue", sans-serif;
        }
        
        em {
          font-style: normal;
          font-weight: normal;
          text-decoration: underline;
          text-decoration-thickness: 0.1em;
          text-underline-offset: 0.05em;
        }
        
        strong {
          font-weight: normal;
          background-color: var(--color-surface);
          color: var(--color-background);
          padding: 0 0.25em;
        }
        
        label,
        output,
        h1 {
          font-size: inherit;
        }
        
        /* style for the range input */
        input[type="range"] {
          --range__thumb-size: 1.5em;
          --range__border-width: 3px;
          --range__thumb-bgc: var(--color-background);
          -webkit-appearance: none;
          margin: 1em 0;
          width: 100%;
          display: block;
          color: inherit;
          background-color: transparent;
        }
        
        input[type="range"]::-webkit-slider-runnable-track {
          width: 100%;
          height: var(--range__border-width);
          cursor: pointer;
          background: currentColor;
          border: 0px solid currentColor;
        }
        
        input[type="range"]::-webkit-slider-thumb {
          border: var(--range__border-width) solid currentColor;
          height: var(--range__thumb-size);
          width: var(--range__thumb-size);
          background: var(--range__thumb-bgc);
          cursor: pointer;
          -webkit-appearance: none;
          margin-top: calc(
            -1 * calc(var(--range__thumb-size) / 2) + 1 * calc(var(
                    --range__border-width
                  ) / 2)
          );
        }
        
        input[type="range"]::-moz-range-track {
          width: 100%;
          height: var(--range__border-width);
          cursor: pointer;
          background: currentColor;
          border: 0px solid currentColor;
        }
        
        input[type="range"]::-moz-range-thumb {
          border-radius: 0;
          border: var(--range__border-width) solid currentColor;
          height: var(--range__thumb-size);
          width: var(--range__thumb-size);
          background: var(--range__thumb-bgc);
          cursor: pointer;
          -webkit-appearance: none;
          margin-top: calc(
            -1 * calc(var(--range__thumb-size) / 2) + 1 * calc(var(
                    --range__border-width
                  ) / 2)
          );
        }
        
        .sliders {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 1.5rem 3rem;
        }
        
        .slider {
          display: grid;
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          gap: 0.5rem;
        }
        
        .slider input[type="range"] {
          grid-column: 1 / -1;
          grid-row: 2;
        }
        
        * + .sliders {
          margin-top: 3rem;
        }
    .........完整代码请登录后点击上方下载按钮下载查看