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

代码语言：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 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23eed272%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23f2dd95%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22f%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23e6ac27%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23ecc05d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22g%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23d37d28%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23de9d5d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22h%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23bf4d28%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23cf795d%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath fill=%22%23655643%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3Cpath d=%22M0 155c38.237-3.347 76.474-6.694 115-7 38.526-.306 77.34 2.428 115 2 37.66-.428 74.164-4.018 110-7s71.002-5.355 108-3c36.998 2.355 75.826 9.438 110 14 34.174 4.562 63.693 6.604 101 12s82.403 14.147 121 7c38.597-7.147 70.697-30.193 108-34 37.303-3.807 79.809 11.625 115 13s63.067-11.306 99-19c35.933-7.694 79.924-10.4 117 0 37.076 10.4 67.237 33.909 106 39 38.763 5.091 86.129-8.234 125-16 38.871-7.766 69.25-9.972 104-13 34.75-3.028 73.875-6.878 111-4s72.25 12.483 107 9c34.75-3.483 69.125-20.053 113-14 43.875 6.053 97.25 34.73 118 42 20.75 7.27 8.875-6.865 37-21l-40 1245H0Z%22 fill=%22url(%23a)%22%2F%3E%3Cpath d=%22M0 311c39.489 1.43 78.978 2.86 117 6 38.022 3.14 74.577 7.99 111 6 36.423-1.99 72.712-10.819 109-7 36.288 3.819 72.574 20.285 107 16s66.993-29.322 103-29c36.007.322 75.454 26.004 114 28 38.546 1.996 76.191-19.695 115-29s78.78-6.226 116 3c37.22 9.226 71.687 24.598 106 20 34.313-4.598 68.47-29.168 106-28 37.........完整代码请登录后点击上方下载按钮下载查看