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: "";
   .........完整代码请登录后点击上方下载按钮下载查看