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.53 1.168 78.43 28.073 119 32 40.57 3.927 80.81-15.124 117-26s68.332-13.576 102-12c33.668 1.576 68.861 7.429 107 16 38.139 8.571 79.222 19.86 118 25 38.778 5.14 75.25 4.13 112-1s73.779-14.381 114-13c40.221 1.381 83.635 13.395 102 14 18.365.605 11.683-10.197 45-21l-40 1089H0Z%22 fill=%22url(%23b)%22%2F%3E%3Cpath d=%22M0 466c41.786-3.083 83.572-6.166 118-8 34.428-1.834 61.498-2.418 95 1s73.437 10.837 113 11c39.563.163 78.756-6.93 116-5 37.244 1.93 72.54 12.88 108 19 35.46 6.12 71.082 7.409 110 0 38.918-7.409 81.131-23.515 122-23 40.869.515 80.394 17.65 114 15 33.606-2.65 61.293-25.087 96-26 34.707-.913 76.434 19.699 117 26 40.566 6.301 79.97-1.708 119-14s77.686-28.865 111-19c33.314 9.865 61.286 46.17 97 45 35.714-1.17 79.171-39.815 118-42 38.829-2.185 73.029 32.088 109 38 35.971 5.912 73.714-16.54 108-23 34.286-6.46 65.115 3.068 109 6 43.885 2.932 100.824-.734 123-2 22.176-1.266 9.588-.133 37 1l-40 934H0Z%22 fill=%22url(%23c)%22%2F%3E%3Cpath d=%22M0 622c40.271-7.017 80.542-14.035 115-10s63.101 19.122 101 21c37.899 1.878 85.052-9.452 122-15 36.948-5.548 63.69-5.314 100-8s82.19-8.29 123-6c40.81 2.29 76.552 12.476 111 13 34.448.524 67.602-8.614 103-11 35.398-2.386 73.038 1.981 113 10s82.244 19.69 118 13c35.756-6.69 64.986-31.74 101-30 36.014 1.74 78.813 30.27 116 39s68.76-2.34 105-13c36.24-10.66 77.143-20.91 116-22 38.857-1.09 75.667 6.982 114 16s78.189 18.983 115 16c36.811-2.983 70.578-18.913 105-23s69.498 3.669 111 5c41.502 1.331 89.43-3.763 109-4 19.57-.237 10.785 4.381 42 9l-40 778H0Z%22 fill=%22url(%23d)%22%2F%3E%3Cpath d=%22M0 777c37.053 1.128 74.105 2.256 113 0 38.895-2.256 79.632-7.896 117-15 37.368-7.104 71.367-15.673 106-6 34.633 9.673 69.9 37.587 108 44 38.1 6.413 79.036-8.675 118-14 38.964-5.325 75.958-.888 110-3s65.133-10.772 101-12c35.867-1.228 76.51 4.977 113.........完整代码请登录后点击上方下载按钮下载查看