svg+css布局实现文字遮罩效果代码-html代码-BFW代码库

svg+css布局实现文字遮罩效果代码

代码语言：html

代码描述：svg+css布局实现文字遮罩效果代码

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

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

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

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Paytone+One&amp;display=swap'>
  
<style>
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
}

#filtercont,
.squigglysvg {
  height: 0px;
  width: 0px;
}

.text {
  filter: url(#filter);
  line-height: 1;
  margin: 0;
  padding: 0;
  -webkit-text-stroke: 1px #1f202030;
  font-weight: 900;
  font-size: min(30vw, 80vh);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: contain;
  background-position: center center;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml;utf8,%3Csvg width=%222000%22 height=%221400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23738973%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%2396a696%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22b%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%2380bca3%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%239fccba%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22c%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23bbdab0%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23cce3c3%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22d%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23f6f7bd%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23f8f9cd%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22e%22 gradien.........完整代码请登录后点击上方下载按钮下载查看