anime实现文字消散显示效果

代码语言: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.4321 41.0971 89.4759 38.075 89.5634 37.9436C89.7821 37.3304 90.1322 36.7391 90.6135 36.1698C91.0948 35.6004 91.5979 35.2062 92.123 34.9872C92.648 34.7682 93.1731 34.6587 93.6981 34.6587C94.1356 34.6587 94.5513 34.7244 94.9451 34.8558C95.9077 35.1624 96.6952 35.7318 97.3078 36.564C97.7016 37.0895 97.9641 37.8998 98.0954 38.9948C98.2704 40.0897 98.3579 41.6665 98.3579 43.725V43.9221C98.3579 45.1485 98.4016 45.7616 98.4891 45.7616H98.5548C98.7298 45.7616 99.1017 45.2141 99.6705 44.1192C99.7142 44.0316 99.758 43.9659 99.8018 43.9221C100.502 42.6957 101.486 41.4694 102.755 40.243C104.068 38.9729 105.315 38.0531 106.496 37.4837C108.64 36.4764 110.653 35.9727 112.534 35.9727C117.172 35.9727 121.044 38.9729 124.151 44.9733C126.032 48.8713 127.06 52.419 127.235 55.6163C127.41 58.7698 127.498 60.8064 127.498 61.7262C127.498 66.0184 126.929 70.026 125.791 73.7488C125.179 75.676 124.085 77.6031 122.51 79.5302C120.935 81.4136 119.316 82.7932 117.653 83.6692C115.509 84.8955 112.884 85.5087 109.778 85.5087C108.596 85.5087 107.677 85.4649 107.021 85.3773C106.409 85.2459 105.555 84.9831 104.462 84.589C103.718 84.3262 102.952 84.0415 102.164 83.7349C101.377 83.3845 100.764 83.0998 100.327 82.8808C99.8893 82.6618 99.5174 82.4866 99.2111 82.3552C98.9048 82.18 98.7298 82.0924 98.686 82.0924C98.686 82.2238 98.686 83.8444 98.686 86.9541C98.7298 90.0638 98.7735 93.9399 98.8173 98.5826C98.861 103.225 98.8829 107.211 98.8829 110.54C98.8829 113.868 98.861 115.752 98.8173 116.19C98.5985 117.503 98.0516 118.467 97.1765 119.08C96.3015 119.693 95.4264 120 94.5513 120C94.2013 120 93.8512 119.956 93.5012 119.869ZM116.8 72.2378C117.719 70.4859 118.288 67.5514 118.506 63.4343V61.5948C118.506 54.4556 117.063 49.2217 114.175 45.893C113.781 45.4988 113.453 45.236 113.19 45.1047C112.928 44.9733 112.622 44.9076 112.272 44.9076C110.959 44.9076 109.581 45.674 108.137 47.207C107.437 48.0391 106.496 49.5721 105.315 51.8058C104.177 54.0395 103.193 56.2514 102.361 58.4413C101.749 60.018 101.158 61.7919 100.589 63.7628C100.064 65.6899 99.6486 67.2886 99.3423 68.5587C99.0798 69.7851 98.9486 70.5735 98.9486 70.9238C98.9486 71.099 98.9704 71.2085 99.0142 71.2523C100.327 72.6539 101.946 73.924 103.871 75.0628C105.84 76.1578 107.852 76.7052 109.909 76.7052C111.484 76.6614 112.84 76.2454 113.978 75.457C115.116 74.6248 116.056 73.5517 116.8 72.2378Z" />
<path d="M135.505 119.869C134.192 119.518 133.208 118.708 132.551 117.438C132.508 117.35 132.464 117.219 132.42 117.044C132.376 116.868 132.333 116.584 132.289 116.19C132.245 115.839 132.201 115.292 132.158 114.547C132.158 113.803 132.136 112.795 132.092 111.525C132.048 110.299 132.005 108.744 131.961 106.86C131.961 104.977 131.939 102.678 131.895 99.9622C131.895 97.2467 131.873 94.0494 131.83 90.3704C131.786 86.6913 131.742 82.4428 131.698 77.625C131.523 63.1277 131.436 52.9227 131.436 47.0099C131.436 41.0971 131.479 38.075 131.567 37.9436C131.786 37.3304 132.136 36.7391 132.617 36.1698C133.098 35.6004 133.602 35.2062 134.127 34.9872C134.652 34.7682 135.177 34.6587 135.702 34.6587C136.139 34.6587 136.555 34.7244 136.949 34.8558C137.911 35.1624 138.699 35.7318 139.311 36.564C139.705 37.0895 139.968 37.8998 140.099 38.9948C140.274 40.0897 140.362 41.6665 140.362 43.725V43.9221C140.362 45.1485 140.405 45.7616 140.493 45.7616H140.558C140.733 45.7616 141.105 45.2141 141.674 44.1192C141.718 44.0316 141.762 43.9659 141.805 43.9221C142.505 42.6957 143.49 41.4694 144.759 40.243C146.071 38.9729 147.318 38.0531 148.5 37.4837C150.644 36.4764 152.656 35.9727 154.538 35.9727C159.176 35.9727 163.048 38.9729 166.154 44.9733C168.036 48.8713 169.064 52.419 169.239 55.6163C169.414 58.7698 169.502 60.8064 169.502 61.7262C169.502 66.0184 168.933 70.026 167.795 73.7488C167.1.........完整代码请登录后点击上方下载按钮下载查看

网友评论0