效果展示
我发现在 css 的世界里，至少在目前看来，想要实现一些不规则的运动曲线是很为难的，因此，今天给大家分享一个借助 SVG 快速实现描边动画的技巧，这里主要分享两种，第一种使用自己绘制SVG文字，第二种使用现成的 SVG 来实现动画，快来学习吧
1.绘制 SVG，实现文字描边动画
国内的 Pixso 设计软件
设计完成之后，在菜单栏中选择复制，然后复制为 SVG
代码实现
介绍关于 SVG 的属性
fill=“none” 背景填充颜色
stroke=“white” 描边的颜色
stroke-width=“3” 描边粗细
关于 SVG 的 CSS 动画属性
stroke-dasharray:用于创建虚线，之所以后面跟的是array的，是因为值是数组
stroke-dasharray = ‘10’ 表示：虚线长10，间距10，然后重复 虚线长10，间距10
stroke-dasharray = ‘10, 5’ 表示：虚线长10，间距5，然后重复 虚线长10，间距5
stroke-dasharray = ‘20, 10, 5’ 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
stroke-dashoffset： offset：偏移的意思
这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
需要注意的是，不管偏移的方向是哪边，要记得dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。
这个属性要搭配stroke-dashoffset才能看得出来效果，非虚线的话，是无法看出偏移的。
想要实现描边动画，就得知道 SVG path 属性的周长，可以借助JavaScript，代码如下，先获取所有的 path 节点，然后for循环打印出每一个的长度，通过 getTotalLength() 方法
<script> const logo = document.querySelectorAll('.logo path'); for (let i = 0; i < logo.length; i++) { console.log(`第${i}个字长度是：${logo[i].getTotalLength()}`); } </script>
如上，成功获取到，然后我们需要设置 stroke-dasharray 为它的周长，你会发现并没有什么变化，因为他就是周长，当你设置的比周长小时就会发生变化了，你可能会问，没变化设置它干嘛，问得好，它是我们使用第二个属性所必备的，接下来，使用 stroke-dashoffset 设置偏移量也和周长相等，这时你会发现，节点消失了，nice
最后，就通过动画，再把偏移量重置为0，这时你就会发现神奇的事情发生了，嘿嘿，快去试试吧
SVG文字描边动画完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG描边</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #333; } .logo path:nth-child(1) { stroke-dasharray: 207; stroke-dashoffset: 207; animation: line 3s ease forwards; } .logo path:nth-child(2) { stroke-dasharray: 144; stroke-dashoffset: 144; animation: line 3s ease forwards 100ms; } .logo path:nth-child(3) { stroke-dasharray: 215; stroke-dashoffset: 215; animation: line 3s ease forwards 300ms; } .logo path:nth-child(4) { stroke-dasharray: 214; stroke-dashoffset: 214; animation: line 4s ease infinite forwards 500ms; } .logo path:nth-child(5) { stroke-dasharray: 208; stroke-dashoffset: 208; animation: line 3s ease forwards 700ms; } .logo path:nth-child(6) { stroke-dasharray: 247; stroke-dashoffset: 247; animation: line 3s ease forwards 900ms; } .logo path:nth-child(7) { stroke-dasharray: 216; stroke-dashoffset: 216; animation: line 4s ease forwards 1200ms; } .logo path:nth-child(8) { stroke-dasharray: 217; stroke-dashoffset: 217; animation: line 5s ease forwards 1400ms; } .logo path:nth-child(9) { stroke-dasharray: 290; stroke-dashoffset: 290; animation: line 6s ease infinite forwards 1600ms; } .logo{ animation: fill 2s ease forwards 2500ms; } @keyframes line{ to{ stroke-dashoffset: 0; } } @keyframes fill{ from{ fill:transparent; } to{ fill:rgba(14, 183, 255, 0.776); } } </style> </head> <body> <svg class="logo" width="712" height="712" viewBox="0 0 512 95" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M33.4285 52.664C34.1325 53.56 35.0925 54.712 36.3085 56.12C37.5885 57.464 38.7725 58.904 39.8605 60.44C41.0125 61.912 41.9405 63.384 42.6445 64.856C43.3485 66.328 43.5405 67.608 43.2205 68.696C42.7085 70.36 41.7485 71.32 40.3405 71.576C38.9325 71.832 37.4605 71.576 35.9245 70.808C34.8365 70.296 33.5885 69.4 32.1805 68.12C30.7725 66.84 29.3965 65.496 28.0525 64.088C26.7725 62.68 25.6205 61.368 24.5965 60.152C23.5725 58.872 22.8685 57.976 22.4845 57.464C22.4845 57.4 22.4525 57.368 22.3885 57.368C22.3885 57.368 22.3885 57.336 22.3885 57.272C21.9405 57.784 21.4925 58.36 21.0445 59C20.5965 59.576 20.1165 60.152 19.6045 60.728C18.9645 61.496 18.2285 62.424 17.3965 63.512C16.6285 64.536 15.7645 65.56 14.8045 66.584C13.9085 67.608 12.9485 68.568 11.9245 69.464C10.9645 70.296 10.0045 70.904 9.04449 71.288C7.76449 71.8 6.51651 71.704 5.30051 71C4.14851 70.36 3.4125 69.464 3.0925 68.312C2.7085 66.968 2.80449 65.56 3.38049 64.088C3.95649 62.616 4.72449 61.208 5.68449 59.864C6.64449 58.456 7.6685 57.112 8.7565 55.832C9.9085 54.552 10.8365 53.432 11.5405 52.472C12.2445 51.576 12.8525 50.808 13.3645 50.168C13.9405 49.464 14.4845 48.792 14.9965 48.152C14.1005 47.192 13.1405 46.136 12.1165 44.984C11.0925 43.768 9.65249 42.2 7.79649 40.28C7.15649 39.576 6.45249 38.808 5.68449 37.976C4.91649 37.08 4.21249 36.152 3.57249 35.192C2.93249 34.232 2.4205 33.24 2.0365 32.216C1.6525 31.192 1.5565 30.136 1.7485 29.048C1.9405 28.088 2.3565 27.32 2.9965 26.744C3.6365 26.104 4.40451 25.688 5.30051 25.496C6.19651 25.24 7.1245 25.208 8.0845 25.4C9.0445 25.592 9.94051 25.976 10.7725 26.552C12.4365 27.768 14.0045 29.272 15.4765 31.064C16.9485 32.856 18.3885 34.552 19.7965 36.152C20.2445 36.728 20.6605 37.272 21.0445 37.784C21.4925 38.232 21.9085 38.68 22.2925 39.128C22.6125 38.616 22.9965 38.104 23.4445 37.592C23.9565 37.08 24.4685 36.472 24.9805 35.768C26.2605 34.232 27.5405 32.632 28.8205 30.968C30.1645 29.304 31.6365 27.864 33.2365 26.648C34.0685 26.008 34.9325 25.624 35.8285 25.496C36.7885 25.304 37.6845 25.336 38.5165 25.592C39.3485 25.784 40.0845 26.168 40.7245 26.744C41.3645 27.32 41.7805 28.024 41.9725 28.856C42.2285 29.88 42.1965 30.904 41.8765 31.928C41.6205 32.952 41.1725 33.944 40.5325 34.904C39.9565 35.864 39.2845 36.792 38.5165 37.688C37.8125 38.52 37.1405 39.288 36.5005 39.992C35.0285 41.592 33.7485 43.032 32.6605 44.312C31.5725 45.592 30.5485 46.808 29.5885 47.96C30.1645 48.6 30.7405 49.304 31.3165 50.072C31.9565 50.776 32.6605 51.64 33.4285 52.664Z" stroke="white" stroke-width="3" /> <path d="M63.1548 34.616C63.1548 36.408 63.1548 38.424 63.1548 40.664C63.2188 42.904 63.2507 45.24 63.2507 47.672C63.2507 50.04 63.2507 52.408 63.2507 54.776C63.2507 57.08 63.2188 59.224 63.1548 61.208C63.0908 62.168 62.9947 63.224 62.8667 64.376C62.7387 65.464 62.4828 66.488 62.0988 67.448C61.7148 68.408 61.1067 69.208 60.2747 69.848C59.5067 70.424 58.4508 70.68 57.1068 70.616C55.1228 70.488 53.6827 69.624 52.7867 68.024C51.9547 66.424 51.4748 64.184 51.3468 61.304C51.3468 59.832 51.3147 58.136 51.2507 56.216C51.2507 54.296 51.2188 52.344 51.1548 50.36C51.1548 48.376 51.1548 46.456 51.1548 44.6C51.1548 42.68 51.1548 40.952 51.1548 39.416C51.1548 38.52 51.1227 37.432 51.0587 36.152C51.0587 34.872 51.0908 33.56 51.1548 32.216C51.2188 30.872 51.3788 29.592 51.6348 28.376C51.8908 27.096 52.3068 26.04 52.8828 25.208C53.3308 24.696 53.9707 24.312 54.8027 24.056C55.6347 23.736 56.4987 23.576 57.3947 23.576C58.3547 23.576 59.2507 23.736 60.0827 24.056C60.9787 24.376 61.6187 24.824 62.0027 25.4C62.2587 25.784 62.4508 26.328 62.5788 27.032C62.7067 27.736 62.8027 28.536 62.8667 29.432C62.9947 30.264 63.0587 31.16 63.0587 32.12C63.1227 33.016 63.1548 33.848 63.1548 34.616ZM59.5067 15.224C57.5227 15.736 55.8588 15.544 54.5148 14.648C53.2348 13.688 52.4347 12.28 52.1147 10.424C51.8587 9.08 51.9548 7.896 52.4028 6.87199C52.8508 5.848 53.5227 5.07999 54.4187 4.56799C55.3147 3.99199 56.3388 3.736 57.4908 3.8C58.6428 3.86399 59.7947 4.312 60.9467 5.144C62.0347 5.912 62.8027 6.80799 63.2507 7.83199C63.7627 8.856 63.9227 9.848 63.7307 10.808C63.6027 11.768 63.1868 12.664 62.4828 13.496C61.7788 14.264 60.7867 14.84 59.5067 15.224Z" stroke="white" stroke-width="3" /> <path d="M82.822 30.584C84.742 29.624 86.758 28.952 88.87 28.568C90.982 28.12 93.062 28.024 95.11 28.28C97.222 28.472 99.238 29.016 101.158 29.912C103.078 30.744 104.87 31.96 106.534 33.56C108.198 35.224 109.478 37.048 110.374 39.032C111.27 41.016 111.91 43.224 112.294 45.656C112.55 47.32 112.966 48.856 113.542 50.264C114.118 51.672 114.726 53.08 115.366 54.488C116.07 55.896 116.71 57.304 117.286 58.712C117.926 60.12 118.438 61.592 118.822 63.128C119.142 64.6 119.014 66.04 118.438 67.448C117.926 68.792 116.838 69.624 115.174 69.944C114.214 70.136 113.286 70.072 112.39 69.752C111.558 69.368 110.79 68.856 110.086 68.216C109.382 67.512 108.742 66.776 108.166 66.008C107.654 65.176 107.174 64.408 106.726 63.704C105.254 65.624 103.654 67.128 101.926 68.216C100.198 69.24 98.118 69.912 95.686 70.232C93.638 70.488 91.686 70.552 89.83 70.424C87.974 70.296 85.99 69.944 83.878 69.368C81.126 68.664 78.854 67.448 77.062 65.72C75.334 63.928 73.99 61.88 73.03 59.576C72.134 57.208 71.654 54.68 71.59 51.992C71.526 49.304 71.846 46.648 72.55 44.024C73.446 40.568 74.79 37.752 76.582 35.576C78.374 33.4 80.454 31.736 82.822 30.584ZM85.222 41.816C84.326 42.712 83.622 43.768 83.11 44.984C82.598 46.2 82.278 47.48 82.15 48.824C82.086 50.168 82.214 51.512 82.534 52.856C82.854 54.2 83.366 55.384 84.07 56.408C84.71 57.304 85.798 58.072 87.334 58.712C88.87 59.288 90.47 59.64 92.134 59.768C94.054 59.896 95.718 59.384 97.126 58.232C98.598 57.08 99.686 55.64 100.39 53.912C101.158 52.12 101.51 50.232 101.446 48.248C101.382 46.2 100.838 44.344 99.814 42.68C99.046 41.464 98.022 40.568 96.742 39.992C95.526 39.416 94.214 39.128 92.806 39.128C91.398 39.064 89.99 39.288 88.582 39.8C87.238 40.248 86.118 40.92 85.222 41.816Z" stroke="white" stroke-width="3" /> <path d="M139.193 27.608C141.305 26.584 143.513 25.848 145.817 25.4C148.121 24.952 150.393 24.856 152.633 25.112C154.937 25.368 157.145 25.976 159.257 26.936C161.433 27.896 163.417 29.24 165.209 30.968C166.681 32.44 167.961 34.232 169.049 36.344C170.137 38.392 170.937 40.408 171.449 42.392C172.537 45.912 172.697 49.464 171.929 53.048C171.161 56.632 169.849 59.96 167.993 63.032C167.097 64.44 165.977 65.72 164.633 66.872C163.353 67.96 161.977 68.856 160.505 69.56C158.585 70.456 156.505 71.064 154.265 71.384C152.025 71.768 149.849 71.864 147.737 71.672C143.897 71.48 140.505 70.52 137.561 68.792C134.681 67.064 132.345 64.856 130.553 62.168C128.825 59.48 127.673 56.44 127.097 53.048C126.585 49.592 126.809 46.072 127.769 42.488C128.793 38.648 130.265 35.544 132.185 33.176C134.169 30.744 136.505 28.888 139.193 27.608ZM142.073 40.472C141.113 41.368 140.377 42.488 139.865 43.832C139.353 45.176 139.033 46.584 138.905 48.056C138.777 49.464 138.873 50.904 139.193 52.376C139.577 53.784 140.153 55.064 140.921 56.216C141.561 57.176 142.713 57.976 144.377 58.616C146.041 59.256 147.769 59.64 149.561 59.768C151.609 59.896 153.401 59.352 154.937 58.136C156.473 56.856 157.625 55.288 158.393 53.432C159.225 51.576 159.609 49.56 159.545 47.384C159.481 45.208 158.905 43.224 157.817 41.432C157.049 40.152 155.961 39.224 154.553 38.648C153.209 38.008 151.769 37.688 150.233 37.688C148.761 37.624 147.289 37.848 145.817 38.36C144.345 38.808 143.097 39.512 142.073 40.472Z" stroke="white" stroke-width="3" /> <path d="M302.363 59.48C303.323 59.48 304.379 59.512 305.531 59.576C306.747 59.576 307.899 59.672 308.987 59.864C310.139 59.992 311.163 60.248 312.059 60.632C313.019 61.016 313.691 61.528 314.075 62.168C315.035 63.832 315.323 65.336 314.939 66.68C314.619 67.96 313.915 68.952 312.827 69.656C311.675 70.488 310.331 71.032 308.795 71.288C307.259 71.608 305.851 71.736 304.571 71.672C301.947 71.544 299.163 71.512 296.219 71.576C293.275 71.704 290.491 71.8 287.867 71.864C286.971 71.864 286.011 71.864 284.987 71.864C284.027 71.928 283.099 71.864 282.203 71.672C281.307 71.544 280.443 71.256 279.611 70.808C278.843 70.36 278.171 69.656 277.595 68.696C276.827 67.48 276.635 66.264 277.019 65.048C277.467 63.768 277.979 62.584 278.555 61.496C279.451 59.896 280.507 58.328 281.723 56.792C283.003 55.256 284.091 53.944 284.987 52.856L296.987 37.112L287.291 37.4C286.523 37.4 285.691 37.4 284.795 37.4C283.963 37.4 283.099 37.336 282.203 37.208C281.307 37.016 280.475 36.792 279.707 36.536C278.939 36.28 278.267 35.896 277.691 35.384C277.115 34.808 276.699 34.168 276.443 33.464C276.187 32.696 276.059 31.928 276.059 31.16C276.123 30.392 276.283 29.656 276.539 28.952C276.859 28.184 277.275 27.512 277.787 26.936C278.171 26.552 278.651 26.232 279.227 25.976C279.867 25.72 280.571 25.528 281.339 25.4C282.107 25.272 282.875 25.208 283.643 25.208C284.475 25.144 285.243 25.112 285.947 25.112C287.355 25.112 288.923 25.112 290.651 25.112C292.379 25.112 294.043 25.112 295.643 25.112C297.307 25.048 298.843 25.016 300.251 25.016C301.723 24.952 302.907 24.92 303.803 24.92C304.955 24.92 306.107 24.888 307.259 24.824C308.411 24.76 309.499 24.856 310.523 25.112C311.547 25.368 312.411 25.848 313.115 26.552C313.883 27.192 314.363 28.248 314.555 29.72C314.683 30.68 314.619 31.64 314.363 32.6C314.171 33.496 313.819 34.392 313.307 35.288C312.859 36.12 312.315 36.984 311.675 37.88C311.035 38.712 310.395 39.512 309.755 40.28L294.875 59.48H302.363Z" stroke="white" stroke-width="3" /> <path d="M360.28 52.088C360.344 53.368 360.376 54.712 360.376 56.12C360.376 57.464 360.344 58.712 360.28 59.864C360.216 61.592 360.12 63.192 359.992 64.664C359.864 66.072 359.608 67.288 359.224 68.312C358.84 69.272 358.232 70.008 357.4 70.52C356.632 70.968 355.544 71.096 354.136 70.904C352.664 70.712 351.608 70.008 350.968 68.792C350.328 67.576 349.88 66.2 349.624 64.664C349.432 63.064 349.368 61.464 349.432 59.864C349.496 58.264 349.496 57.016 349.432 56.12C349.368 54.712 349.304 53.112 349.24 51.32C349.24 49.464 349.048 47.736 348.664 46.136C348.344 44.472 347.768 43.064 346.936 41.912C346.104 40.76 344.856 40.152 343.192 40.088C341.08 39.96 339.448 40.12 338.296 40.568C337.208 41.016 336.408 41.688 335.896 42.584C335.384 43.416 335.064 44.44 334.936 45.656C334.872 46.872 334.744 48.184 334.552 49.592L334.456 53.336V60.344C334.456 61.496 334.424 62.712 334.36 63.992C334.36 65.208 334.168 66.328 333.784 67.352C333.4 68.376 332.792 69.24 331.96 69.944C331.192 70.648 330.04 71 328.504 71C326.584 71 325.144 70.392 324.184 69.176C323.288 67.896 322.84 66.328 322.84 64.472V9.272C322.84 8.888 322.84 8.536 322.84 8.216C322.904 7.832 322.968 7.44799 323.032 7.064C323.16 6.67999 323.256 6.328 323.32 6.008C323.384 5.624 323.48 5.272 323.608 4.952C323.8 4.312 324.12 3.832 324.568 3.512C324.888 3.192 325.208 2.936 325.528 2.744C325.848 2.55199 326.2 2.424 326.584 2.36C326.904 2.296 327.256 2.264 327.64 2.264C328.024 2.2 328.408 2.168 328.792 2.168C329.752 2.168 330.68 2.456 331.576 3.032C331.96 3.28799 332.312 3.576 332.632 3.896C332.952 4.152 333.208 4.536 333.4 5.048C333.912 6.264 334.168 7.416 334.168 8.504C334.232 8.824 334.264 9.304 334.264 9.944C334.328 10.52 334.36 11.128 334.36 11.768C334.36 12.408 334.36 13.048 334.36 13.688C334.424 14.264 334.456 14.712 334.456 15.032V15.512C334.52 17.56 334.552 19.64 334.552 21.752C334.552 23.864 334.552 26.008 334.552 28.184V29.816C337.24 28.92 340.056 28.504 343 28.568C345.944 28.568 348.568 29.144 350.872 30.296C353.24 31.512 355.032 32.888 356.248 34.424C357.528 35.96 358.456 37.656 359.032 39.512C359.608 41.368 359.928 43.352 359.992 45.464C360.12 47.576 360.216 49.784 360.28 52.088Z" stroke="white" stroke-width="3" /> <path d="M379.259 30.584C381.179 29.624 383.195 28.952 385.307 28.568C387.419 28.12 389.499 28.024 391.547 28.28C393.659 28.472 395.676 29.016 397.596 29.912C399.516 30.744 401.307 31.96 402.971 33.56C404.635 35.224 405.916 37.048 406.812 39.032C407.708 41.016 408.348 43.224 408.732 45.656C408.988 47.32 409.403 48.856 409.979 50.264C410.555 51.672 411.164 53.08 411.804 54.488C412.508 55.896 413.148 57.304 413.724 58.712C414.364 60.12 414.876 61.592 415.26 63.128C415.58 64.6 415.451 66.04 414.875 67.448C414.363 68.792 413.276 69.624 411.612 69.944C410.652 70.136 409.724 70.072 408.828 69.752C407.996 69.368 407.227 68.856 406.523 68.216C405.819 67.512 405.18 66.776 404.604 66.008C404.092 65.176 403.612 64.408 403.164 63.704C401.692 65.624 400.092 67.128 398.364 68.216C396.636 69.24 394.555 69.912 392.123 70.232C390.075 70.488 388.124 70.552 386.268 70.424C384.412 70.296 382.427 69.944 380.315 69.368C377.563 68.664 375.292 67.448 373.5 65.72C371.772 63.928 370.427 61.88 369.467 59.576C368.571 57.208 368.091 54.68 368.027 51.992C367.963 49.304 368.283 46.648 368.987 44.024C369.883 40.568 371.228 37.752 373.02 35.576C374.812 33.4 376.891 31.736 379.259 30.584ZM381.66 41.816C380.764 42.712 380.06 43.768 379.548 44.984C379.036 46.2 378.715 47.48 378.587 48.824C378.523 50.168 378.651 51.512 378.971 52.856C379.291 54.2 379.804 55.384 380.508 56.408C381.148 57.304 382.236 58.072 383.772 58.712C385.308 59.288 386.907 59.64 388.571 59.768C390.491 59.896 392.155 59.384 393.563 58.232C395.035 57.08 396.124 55.64 396.828 53.912C397.596 52.12 397.947 50.232 397.883 48.248C397.819 46.2 397.276 44.344 396.252 42.68C395.484 41.464 394.46 40.568 393.18 39.992C391.964 39.416 390.652 39.128 389.244 39.128C387.836 39.064 386.428 39.288 385.02 39.8C383.676 40.248 382.556 40.92 381.66 41.816Z" stroke="white" stroke-width="3" /> <path d="M423.342 36.728C423.342 35.256 423.31 33.688 423.246 32.024C423.246 30.36 423.534 28.856 424.11 27.512C424.622 26.296 425.454 25.432 426.606 24.92C427.822 24.344 429.006 24.216 430.158 24.536C431.31 24.728 432.206 25.08 432.846 25.592C433.486 26.104 433.934 26.712 434.19 27.416C434.51 28.056 434.702 28.824 434.766 29.72C434.83 30.552 434.894 31.384 434.958 32.216C435.598 31.064 436.398 30.136 437.358 29.432C438.318 28.728 439.31 28.152 440.334 27.704C441.358 27.256 442.318 26.936 443.214 26.744C444.174 26.552 444.91 26.456 445.422 26.456C447.854 26.456 450.254 27 452.622 28.088C455.054 29.112 457.07 30.584 458.67 32.504C459.566 33.656 460.238 34.872 460.686 36.152C461.198 37.368 461.55 38.648 461.742 39.992C461.998 41.336 462.158 42.712 462.222 44.12C462.286 45.464 462.35 46.84 462.414 48.248C462.734 52.344 462.734 56.408 462.414 60.44C462.35 61.272 462.318 62.232 462.318 63.32C462.318 64.408 462.222 65.496 462.03 66.584C461.902 67.608 461.614 68.536 461.166 69.368C460.782 70.136 460.11 70.616 459.15 70.808C457.806 71.128 456.686 71.192 455.79 71C454.958 70.872 454.286 70.584 453.774 70.136C453.262 69.688 452.878 69.112 452.622 68.408C452.366 67.704 452.142 66.904 451.95 66.008C451.822 65.304 451.694 64.504 451.566 63.608C451.502 62.648 451.438 61.688 451.374 60.728C451.374 59.768 451.342 58.84 451.278 57.944C451.278 56.984 451.278 56.12 451.278 55.352C451.278 54.136 451.246 52.792 451.182 51.32C451.118 49.848 451.118 48.472 451.182 47.192C451.182 44.184 450.382 41.912 448.782 40.376C447.246 38.776 445.134 38.104 442.446 38.36C440.398 38.616 438.606 39.448 437.07 40.856C435.534 42.2 434.798 43.96 434.862 46.136C434.862 46.968 434.862 47.736 434.862 48.44C434.862 49.144 434.83 49.848 434.766 50.552C434.766 51.256 434.766 52.024 434.766 52.856C434.766 53.688 434.766 54.616 434.766 55.64C434.766 57.752 434.766 59.992 434.766 62.36C434.766 64.664 434.478 66.552 433.902 68.024C433.39 69.56 432.526 70.616 431.31 71.192C430.094 71.768 428.654 71.608 426.99 70.712C426.286 70.328 425.71 69.816 425.262 69.176C424.878 68.472 424.558 67.736 424.302 66.968C424.11 66.2 423.982 65.432 423.918 64.664C423.854 63.832 423.79 63.064 423.726 62.36C423.534 60.248 423.406 58.296 423.342 56.504C423.342 54.648 423.342 52.664 423.342 50.552V36.728Z" stroke="white" stroke-width="3" /> <path d="M510.242 52.856C510.242 54.904 510.178 57.112 510.05 59.48C509.986 61.848 509.891 64.056 509.763 66.104C509.763 68.024 509.666 69.944 509.474 71.864C509.346 73.528 509.09 75.32 508.706 77.24C508.322 79.224 507.779 81.048 507.075 82.712C506.179 84.888 504.963 86.744 503.427 88.28C501.891 89.88 499.906 91.032 497.474 91.736C495.426 92.248 493.506 92.568 491.714 92.696C489.922 92.888 488.003 92.856 485.955 92.6C484.611 92.408 483.171 92.024 481.635 91.448C480.099 90.936 478.659 90.264 477.315 89.432C475.971 88.6 474.787 87.608 473.763 86.456C472.739 85.368 472.035 84.12 471.651 82.712C471.203 80.984 471.171 79.48 471.555 78.2C472.003 76.92 472.674 75.992 473.57 75.416C474.466 74.84 475.523 74.744 476.739 75.128C477.955 75.512 479.107 76.504 480.195 78.104C480.963 79.256 482.083 80.184 483.555 80.888C485.027 81.592 486.594 82.008 488.258 82.136C489.922 82.264 491.522 82.04 493.058 81.464C494.658 80.952 495.906 80.024 496.802 78.68C497.442 77.72 497.89 76.344 498.146 74.552C498.466 72.76 498.658 71 498.722 69.272C495.458 70.616 492.099 71.128 488.643 70.808C485.251 70.424 482.147 69.368 479.331 67.64C476.579 65.848 474.338 63.48 472.61 60.536C470.946 57.528 470.242 54.136 470.498 50.36C470.69 47.096 471.363 44.024 472.515 41.144C473.731 38.264 475.714 35.864 478.466 33.944C480.706 32.408 483.234 31.416 486.05 30.968C488.866 30.456 491.587 30.2 494.211 30.2C495.747 30.2 497.25 30.2 498.722 30.2C500.258 30.2 501.666 30.392 502.946 30.776C504.226 31.16 505.379 31.8 506.403 32.696C507.427 33.592 508.194 34.904 508.706 36.632C509.538 39.32 509.986 41.976 510.05 44.6C510.178 47.224 510.242 49.976 510.242 52.856ZM491.714 60.824C492.354 60.824 492.963 60.76 493.539 60.632C494.179 60.504 494.786 60.344 495.362 60.152C496.45 59.768 497.251 59.256 497.763 58.616C498.339 57.976 498.722 57.272 498.914 56.504C499.106 55.672 499.171 54.776 499.107 53.816C499.107 52.856 499.107 51.864 499.107 50.84C499.107 50.008 499.074 49.08 499.01 48.056C499.01 47.032 498.946 46.072 498.818 45.176C498.69 44.216 498.498 43.384 498.242 42.68C497.986 41.976 497.603 41.528 497.091 41.336C496.195 41.08 495.17 40.92 494.018 40.856C492.866 40.728 491.715 40.728 490.562 40.856C489.411 40.92 488.291 41.144 487.203 41.528C486.179 41.848 485.314 42.296 484.61 42.872C483.65 43.704 482.915 44.728 482.403 45.944C481.891 47.16 481.571 48.44 481.443 49.784C481.379 51.128 481.475 52.44 481.731 53.72C482.051 55 482.594 56.152 483.362 57.176C484.258 58.456 485.474 59.384 487.01 59.96C488.546 60.536 490.114 60.824 491.714 60.824Z" stroke="white" stroke-width="3" /> </svg> <script> const logo = document.querySelectorAll('.logo path'); for (let i = 0; i < logo.length; i++) { console.log(`第${i}个字长度是：${logo[i].getTotalLength()}`); } </script> </body> </html>
使用现成SVG制作描边动画
这里推荐的是阿里妈妈的 iconfont
原理大差不差，剩下的就是自己发挥了，我就直接放上代码了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } svg path:nth-child(1) { stroke-dasharray: 4377; stroke-dashoffset: 4377; animation: line 3s ease forwards; } svg { animation: rota .8s linear infinite 3s,fill 2s ease forwards 100ms; } @keyframes line { to { stroke-dashoffset: 0; } } @keyframes fill { from { fill: transparent; } to { fill: rgb(0, 147, 52); } } @keyframes rota{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } </style> </head> <body> <svg t="1649057793063" class="icon" viewBox="0 0 1063 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="874" width="500" height="500" stroke="rgb(0, 147, 52)" stroke-width="14" fill="transparent"> <path d="M529.947518 540.724528c-200.816196 0-303.386296-121.055118-303.386297-270.381264S321.909314 0 529.947518 0z m-61.612061 45.110044c100.400098 173.89217 46.775046 323.256316-82.49308 397.928389S103.972102 1036.411012 0 856.234836z m73.437072 24.566024c100.399098-174.00017 256.517251-202.200197 385.841377-127.528124s186.540182 217.786213 82.49308 397.909388z" p-id="875"></path> </svg> <script> const logo = document.querySelectorAll('svg path'); for (let i = 0; i < logo.length; i++) { console.log(`第${i}个字长度是：${logo[i].getTotalLength()}`); } </script> </body> </html>
