anime实现文字消散显示效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：anime实现文字消散显示效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8e4dd;
}

svg {
  width: 50%;
  height: auto;
}
</style>

</head>

<body>
<svg id="text" viewBox="0 0 449 127" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0" y="0" width="449" height="127" fill="black">
<rect fill="white" width="449" height="127" />
<path d="M12.7755 86.3628C11.9004 85.9248 11.2441 85.3116 10.8066 84.5233C10.4128 83.6911 10.1284 82.4209 9.95338 80.7128C8.85954 72.3035 8.11572 64.5293 7.72194 57.3901C7.32815 50.2072 7.10938 40.5934 7.06563 28.5488C7.02188 25.6143 7 23.1178 7 21.0593C7 18.957 7 17.4021 7 16.3948C7 15.3874 7 14.6209 7 14.0953V12.7157C7 11.9273 7.02188 11.336 7.06563 10.9419C7.10938 10.5039 7.15314 10.1973 7.19689 10.0221C7.24065 9.8469 7.30628 9.67171 7.39378 9.49651C8.26886 7.83217 9.49397 7 11.0691 7C11.4629 7 11.9442 7.15329 12.513 7.45988C13.1255 7.72267 13.5849 8.02926 13.8912 8.37965C14.1537 8.64244 14.3506 8.97093 14.4819 9.36512C14.6569 9.7593 14.7882 10.4163 14.8757 11.336C14.9632 12.2558 15.0288 13.6355 15.0726 15.475C15.1601 17.2707 15.2257 19.7016 15.2695 22.7674C15.357 26.1837 15.4226 29.2715 15.4664 32.0308C15.5539 34.7463 15.6195 36.5202 15.6632 37.3523C16.057 45.9806 16.2977 50.4481 16.3852 50.7547L16.5164 51.543L17.3696 49.9663C20.0824 44.8857 22.8389 41.5351 25.6391 39.9145C28.4831 38.294 30.8458 37.4837 32.7272 37.4837C34.2586 37.4837 35.7681 37.856 37.2557 38.6006C40.581 40.2649 43.1187 44.2287 44.8689 50.4919C45.4814 52.6818 45.919 55.3316 46.1815 58.4413C46.4878 61.5072 46.7503 65.9527 46.9691 71.7779C47.0566 74.9314 47.1003 77.0118 47.1003 78.0192C47.1003 79.0266 47.1003 79.7054 47.1003 80.0558C47.1003 81.0632 47.0566 81.8297 46.9691 82.3552C46.8378 83.0122 46.6409 83.5159 46.3784 83.8663C45.5471 85.005 44.7595 85.6182 44.0157 85.7058C43.3156 85.7496 42.8781 85.7715 42.7031 85.7715C41.5655 85.7715 40.581 85.3335 39.7497 84.4576C39.1809 83.8882 38.7871 83.2093 38.5683 82.4209C38.3496 81.5888 38.2183 80.2529 38.1746 78.4134C37.8683 64.6607 37.2557 56.2076 36.3369 53.0541C35.3306 48.937 33.9523 46.8785 32.2022 46.8785C31.9834 46.8785 31.7428 46.9223 31.4802 47.0099C29.3363 47.6669 27.1486 50.251 24.9172 54.7622C21.8107 61.3758 19.9511 69.5223 19.3386 79.2017C19.2511 81.4355 19.0542 83.0122 18.7479 83.932C18.4416 84.8517 17.9166 85.5306 17.1728 85.9686C16.5164 86.4066 15.9258 86.6256 15.4007 86.6256C14.9194 86.6694 14.5694 86.6913 14.3506 86.6913C13.7381 86.6913 13.213 86.5818 12.7755 86.3628Z" />
<path d="M68.4303 85.9686C64.405 85.1364 60.8171 83.1217 57.6669 79.9244C53.729 75.9826 51.7601 71.6246 51.7601 66.8506C51.8476 63.0839 53.029 60.1494 55.3042 58.0471C57.6231 55.901 60.5984 54.8279 64.2299 54.8279C67.8615 54.8717 71.4493 56.1419 74.9934 58.6384L76.5029 59.6895L76.3716 58.4413C76.3279 58.0471 76.2622 57.5434 76.1747 56.9302C76.0872 56.2733 75.9997 55.6382 75.9122 55.025C75.2559 51.1707 74.2495 47.9954 72.8932 45.4988C71.5806 43.0023 70.0929 41.5789 68.4303 41.2285C68.2553 41.1847 68.0803 41.1628 67.9053 41.1628C66.9864 41.1628 65.9145 41.5351 64.6893 42.2797C63.2455 43.1556 61.8454 44.4039 60.489 46.0244C59.5264 47.2508 58.7826 48.1048 58.2575 48.5866C57.7325 49.0246 57.1856 49.3093 56.6168 49.4407C56.1792 49.5283 55.7417 49.5721 55.3042 49.5721C54.0791 49.5721 53.0508 49.1341 52.2195 48.2581C51.4757 47.426 51.1038 46.4624 51.1038 45.3674C51.1038 44.8419 51.1913 44.2944 51.3663 43.725C51.7164 42.8052 52.5039 41.6227 53.729 40.1773C54.9979 38.732 56.3105 37.4399 57.6669 36.3012C60.9922 33.6295 64.3831 32.2936 67.8396 32.2936C73.8339 32.2936 78.5155 36.0603 81.8846 43.5936C83.9848 48.8056 85.1005 53.3607 85.2317 57.2587C85.4068 61.113 85.4943 63.5876 85.4943 64.6826C85.4943 69.9822 85.0567 74.9314 84.1817 79.5302C84.0066 80.6252 83.6129 81.6107 83.0003 82.4866C82.4315 83.3626 81.5564 83.8882 80.3751 84.0634C80.025 84.1072 79.6094 84.2167 79.1281 84.3919C78.6906 84.5671 78.2749 84.7423 77.8811 84.9174C76.5685 85.5744 75.3434 85.9686 74.2058 86.1C73.0682 86.2314 72.215 86.2971 71.6462 86.2971C70.5524 86.2971 69.4804 86.1876 68.4303 85.9686ZM73.812 76.9023C74.2933 76.5957 74.6215 76.2673 74.7965 75.9169C74.9715 75.5227 75.059 75.0847 75.059 74.6029C75.059 74.3839 75.0371 74.143 74.9934 73.8802C74.6871 70.7705 72.9151 68.0769 69.6773 65.7994C67.5333 64.4417 65.6082 63.7628 63.9018 63.7628H63.3111C61.4734 63.9818 60.5546 64.9891 60.5546 66.7849C60.5546 67.3105 60.7078 68.0331 61.014 68.9529C61.3203 69.8727 61.6703 70.661 62.0641 71.318C63.6393 73.6393 65.3457 75.238 67.1833 76.114C69.0647 76.9899 70.5524 77.4279 71.6462 77.4279C72.4338 77.4279 73.1557 77.2527 73.812 76.9023Z" />
<path d="M93.5012 119.869C92.1886 119.518 91.2041 118.708 90.5478 117.438C90.5041 117.35 90.4603 117.219 90.4166 117.044C90.3728 116.868 90.3291 116.584 90.2853 116.19C90.2416 115.839 90.1978 115.292 90.154 114.547C90.154 113.803 90.1322 112.795 90.0884 111.525C90.0447 110.299 90.0009 108.744 89.9572 106.86C89.9572 104.977 89.9353 102.678 89.8915 99.9622C89.8915 97.2467 89.8696 94.0494 89.8259 90.3704C89.7821 86.6913 89.7384 82.4428 89.6946 77.625C89.5196 63.1277 89.4321 52.9227 89.4321 47.0099C89.43.........完整代码请登录后点击上方下载按钮下载查看