svg+css实现可编辑的文字切割效果代码-html代码-BFW代码库

svg+css实现可编辑的文字切割效果代码

代码语言：html

代码描述：svg+css实现可编辑的文字切割效果代码

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

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

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

  
  
  
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap");
html, body {
  display: grid;
}

html {
  min-height: 100%;
  background: #121212;
  /* pseudo needed because of no support yet for
   * filter(linear-gradient(#121212), url(#noisey)) */
}
html::before {
  /* stack it in the one HTML grid cell */
  grid-area: 1/1;
  background: #0001;
  /* add noise to backdrop underneath */
  backdrop-filter: url(#noisey);
  content: "";
}

/* stack it in the one HTML grid cell */
body {
  grid-area: 1/1;
}

/* svg element only used to hold filters, 
 * not used to display an graphics, 
 * take it out of document flow */
svg[width="0"][height="0"] {
  position: fixed;
}

div {
  /* needed for absolutely positioned pseudo */
  position: relative;
  /* in the middle of the one body grid cell */
  place-self: center;
  /* so italic text doesn't overflow laterally */
  padding: 0 0.125em;
  color: #00f;
  /* text on blue channel */
  font: italic 900 clamp(2em, 21.5vw, 25em) montserrat, sans-serif;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
  /* prevent blending pseudo with what's behind div */
  isolation: isolate;
  filter: url(#sliced) url(#noisey) hue-rotate(calc(var(--hov, 0)*120deg));
  transition: filter 0.3s;
  /* needed ONLY because of Firefox and Safari bugs 
   * when it comes to background-clip: text
   * 🪲 Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1481498
   * 🪲 Safari https://bugs.webkit.org/show_bug.cgi?id=267129 */
}
div::after {
  /* to place it on top of text */
  position: absolute;
  /* make it cover parent's entire padding-box */
  inset: 0;
  /* slice lines on red & green chanels */
  background: linear-gradient(-4deg, #0000 calc(58.5% + -.5px), #f00 calc(58.5% + .5px)), linear-gradient(-2.5deg, #0f0 calc(31% + -.5px), #000 calc(31% + .5px));
  background-size: 100% 1lh;
  /* blend gradients with text */
  mix-blend-mode: lighten;
  /* allow text selection & right click menu */
  pointer-events: none;
  content: "";
}
div:focus {
  outline: none;
}
div:hover, div:focus {
  --hov: 1 ;
}
</style>


  
  
<.........完整代码请登录后点击上方下载按钮下载查看