svg filter实现碎纸边缘褶皱撕裂效果代码-html代码-BFW代码库

svg filter实现碎纸边缘褶皱撕裂效果代码

代码语言：html

代码描述：svg filter实现碎纸边缘褶皱撕裂效果代码

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

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

<head>
    <meta charset="UTF-8">






    <style>
        .fx-form {
          position: relative;
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 2ch;
          padding: 4ch;
          margin: 2ch;
          --worn: blur(0);
          --roughpaper: blur(0);
          --sepia: sepia(0);
          --drops-shadow: drop-shadow(0 0 0 #0000);
          --filters: var(--worn) var(--roughpaper) var(--sepia) var(--drops-shadow);
        }
        .fx-form:has(#isWorn:checked) {
          --worn: url(#worn);
        }
        .fx-form:has(#isRoughpaper:checked) {
          --roughpaper: url(#roughpaper);
        }
        .fx-form:has(#isSepia:checked) {
          --sepia: sepia(60);
        }
        .fx-form:has(#isDropShadow:checked) {
          --drops-shadow: drop-shadow(0.5ch 1ch 1.2ch #0006);
        }
        .fx-form:before {
          content: "";
          border-radius: inherit;
          position: absolute;
          inset: 0;
          pointer-events: none;
          filter: var(--filters);
          background-color: var(--paper-color);
          z-index: -1;
        }
        
        h1 {
          grid-column: span 2;
        }
        
        .hidden-svg {
          display: block;
          width: 0;
          height: 0;
          position: absolute;
        }
        
        html {
          --paper-color: hsl(256 10% 46.67%);
          --surface: hsl(256 20% 20%);
          --text: hsl(200 5% 80%);
          background-color: var(--surface);
          color: var(--text);
          block-size: 100%;
          font-size: 20px;
        }
        
        body {
          min-block-size: 100%;
          min-inline-size: 100%;
          margin: 0;
          box-sizing: border-box;
          font-family: system-ui, sans-serif;
          overflow-y: auto;
          display: grid;
          place-content: center;
        }
    </style>



</head>

<body>
    <div class="fx-form">
        <h1>Paper FX Settings</h1>
        <label for="isRoughpaper">Roughpaper FX</label>
        <input checked type="checkbox" id="isRoughpaper">
        <label for="isWorn">Worn FX</label>
        <input checked type="checkbox" id="isWorn">
        <label for="isSepia">Sepia FX</label>
        <input checked type="checkbox" id="isSepia">
        <label for="isDropShadow">Drop Shadow FX</label>
        <input checked type="checkbox" id="isDropShadow">
    </div>

    <svg class="hidden-svg">
    <defs>
        <filter id="roughpaper">
            <feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="1" seed=".........完整代码请登录后点击上方下载按钮下载查看