svg+css实现文字滤镜filter分割效果代码-html代码-BFW代码库

svg+css实现文字滤镜filter分割效果代码

代码语言：html

代码描述：svg+css实现文字滤镜filter分割效果代码

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

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

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

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
html, body {
  display: grid;
}

html {
  min-height: 100%;
}

body {
  overflow: hidden;
  background: #121212;
  filter: drop-shadow(5px 5px 13px);
}

svg {
  position: fixed;
}

div {
  place-self: center;
  position: relative;
  width: 1lh;
  color: #00f;
  font: 700 75vmin/1.125 poppins, sans-serif;
  text-align: center;
  text-transform: uppercase;
  isolation: isolate;
  clip-path: inset(0 round Max(3px, 0.015em));
  filter: url(#separate) url(#relative);
}
div::after {
  position: absolute;
  inset: -0.125em;
  background: repeating-linear-gradient(var(--ang), #000, #f00 1px 5%, #000 calc(5% + 1px) 10%);
  mix-blend-mode: lighten;
  content: "";
}
</style>


  
  
</head>

<body translate="no">
  <svg width="0" height="0">
  <filter id="separate" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">
    <feColorMatrix in="SourceGraphic" values="0 0 0 0 0 
		                      0 0 0 0 0 
													0 0 0 0 0 
													0 0 1 0 0" result="basetext"></feColorMatrix>
    <feColorMatrix in="SourceGraphic" values="0 0 0 0 0 
		                      0 0 0 0 0 
													0 0 0 0 0 
													1 0 0 0 0"></feColorMatrix>
    <feComposite in2="basetext" operator="out" result="baseline"></feComposite>
    <feGaussianBlur stdDeviation="3" result="baseblur"></feGaussianBlur>
    <feComponentTransfer result="baseedge">
      <feFuncA type="table" tableValues="-1 2 -1"></feFuncA>
      <feFuncG type="discrete" tableValues="1"></feFuncG>
    </feComponentTransfer>
    <feComponentTransfer in="baseblur">
      <feFuncA type="table" tableValues="-1 2 1"></feFuncA>
      <feFuncR type="discrete" tableValues="1"></feFuncR>
    </feComponentTransfer>
    <feBlend in="baseedge" mode="lighten"></feBlend>
    <feComposite in2="baseline" operator="in" result="fullbase"></feComposite>
    <feColorMatrix in="SourceGraphic" values="0 0 0 0 0 
		                      0 0 0 0 0 
													0 0 0 0 0 
												 -1 0 0 0 1"></feColorMatrix>
    <feComposite in2="basetext" operator="out" result="compline"></feComposite>
    <feGaussianBlur stdDeviation="3" result="compblur"></feGaussianBlur>
    <feComponentTransfer result="compedge">
      <feFuncA type="table" tableValues="-1 2 -1"></feFuncA>
      <feFuncG type="discrete" tableValues="1"></feFuncG>
    </feComponentTransfer>
    <feComponentTransfer in="compblur">
      <feFuncA type="table" tableValues="-1 2 1"></feFuncA>
      <feFuncB type="discrete" tableValues="1"></feFuncB>
    </feComponentTransfer>
    <feBlend in="compedge" mode="lighten"></feBlend>
    <feComposite in2="compline" operator="in"></feComposite>
    <feBlend in="fullbase" result="fullline"></feBlend>
    <feColorMatrix in="SourceGraphic" values="1 0 0 0 0 
		                      0 0 0 0 0 
													1 0 0 0 0 
												  0 0 0 1 0"></feColorMatrix>
    <feBlend in="fullline"></feBlend>
  </filter>
  <filter id="relative" color-interpolation-filters="sRGB" primitiveUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency=".371 .713" numOctaves="4" result="topnoise"></feTurbulence>
    <feTurbulence baseFrequency=".173 .317"></feTurbulence>
    <feDisplacementMap in="topnoise" scale=".01" xChannelSelector=".........完整代码请登录后点击上方下载按钮下载查看