svg线框动画效果
代码语言:html
所属分类:动画
代码描述:svg线框动画效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0px; padding: 0px; justify-content: center; align-items: center; display: flex; min-height: 100vh; background: #EEC0B9; } .container { display: flex; justify-content:center; align-items: center; } .svg-icon { width: 150px !important; justify-content: space-between; } .svg-icon path{ fill: transparent; stroke: #002672; stroke-dasharray: 1700; stroke-offset: 0; width: 200px ; height: 200px; } .svg-icon:hover path { animation: animate 2s linear forwards; } .pomegranate{ stroke-width: 10 } .mango{ stroke-width: 7; } .strawberry{ stroke-width: 9; } .pineapple{ stroke-width: 2; } .cherry{ stroke-width: 7; } .mango:hover path { animation: mango-color 2s linear forwards; } .pomegranate:hover path { animation: pomegranate-color 2s linear forwards; } .pineapple:hover path { animation: pineapple-color 2s linear forwards; } .strawberry:hover path { animation: strawberry-color 2s linear forwards; } .cherry:hover path { animation: cherry-color 2s linear forwards; } @keyframes strawberry-color{ 0%{ stroke-dashoffset: 0; } 40%{ stroke-dashoffset: 1700; } 80%{ stroke-dashoffset: 3400; fill: transparent; } 100%{ stroke-dashoffset: 3400; fill: red; stroke: #262626; stroke-width: 2px; } } @keyframes cherry-color{ 0%{ stroke-dashoffset: 0; } 40%{ stroke-dashoffset: 1700; } 80%{ stroke-dashoffset: 3400; fill: transparent; } 100%{ stroke-dashoffset: 3400; fill: green; stroke: #262626; stroke-width: 2px; } } @keyframes mango-color{ 0%{ stroke-dashoffset: 0; } 40%{ stroke-dashoffset: 1700; } 80%{ stroke-dashoffset: 3400; fill: transparent; } 100%{ stroke-dashoffset: 3400; fill: orange; stroke: #262626; stroke-width: 2px; } } @keyframes pineapple-color{ 0%{ stroke-dashoffset: 0; } 40%{ stroke-dashoffset: 1700; } 80%{ stroke-dashoffset: 3400; fill: transparent; } 100%{ stroke-dashoffset: 3400; fill: yellow; stroke: #262626; stroke-width: 2px; } } @keyframes pomegranate-color{ 0%{ stroke-dashoffset: 0; } 40%{ stroke-dashoffset: 1700; } 80%{ stroke-dashoffset: 3400; fill: transparent; } 100%{ stroke-dashoffset: 3400; fill: red; stroke: #262626; stroke-width: 2px; } } /* @keyframes animate{ 0%{ stroke-dashoffset: 0; } 40%{ stroke-dashoffset: 1700; } 80%{ stroke-dashoffset: 3400; fill: transparent; } 100%{ stroke-dashoffset: 3400; fill: yellow; } } </style> </head> <body translate="no"> <div class="container"> <div class="svg-icon pomegranate"> <svg id="Layer_1" height="" viewBox="0 0 512 512" width="" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m303.01 103.86c69.51 4.99 152.34 74.31 152.34 194.33 0 133.56-105 202.81-193.6 202.81-86.6 0-205.1-73.85-205.1-202.81 0-127.6 77.7-189.34 158.04-195.57a.843.843 0 0 0 -.04-.23c-12.73-26.38-22.89-91.39-22.89-91.39s25.12 18.99 37.2 45.92l15.53-45.92a220.673 220.673 0 0 1 15.54 56.38c1.83 14.17 20.52-53.34 20.52-53.34s12.27 21.7 9.97 45.86l29.72-37.39s-2.68 56.38-17.06 80.34a3.357 3.357 0 0 0 -.17 1.01z" fill="#f43b3b" /><path d="m340.53 418.38c-86.6 0-205.1-73.85-205.1-202.81 0-38.006 6.895-70.166 18.7-96.759-54.8 26.432-97.48 84.814-97.48 179.379 0 128.96 118.5 202.81 205.1 202.81 64.382 0 137.41-36.578 172.53-107.815-29.797 16.715-62.774 25.195-93.75 25.195z" fill="#d61d1d" /><g opacity=".8"><path d="m100.994 347.221a6 6 0 0 1 -5.851-4.7 205.014 205.014 0 0 1 -4.783-44.331 273.119 273.119 0 0 1 6.265-59.634 6 6 0 1 1 11.709 2.629 261.1 261.1 0 0 0 -5.974 57.005 193.077 193.077 0 0 0 4.5 41.731 6.006 6.006 0 0 1 -5.863 7.3z" fill="#e9e9e9" /></g><g opacity=".8"><path d="m121.376 398.031a5.993 5.993 0 0 1 -5.05-2.752 196.57 196.57 0 0 1 -12.832-23.211 6 6 0 0 1 10.873-5.076 184.516 184.516 0 0 0 12.047 21.789 6 6 0 0 1 -5.038 9.25z" fill="#e9e9e9" /></g></svg> </div> <div class="svg-icon mango"> <svg id="Layer_1" height="" viewBox="0 0 512 512" width="" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m430.04 399.17c21.67-66.08 31.96-134.04 13.74-203.84-12.43-47.59-53.95-98.69-104.83-112.65l-.01.01s-28.389-6.5-57.2-4.54c-29.317 1.99-59.092 12.44-61.856 13.56-65.59 26.62-105.34 119.21-79.12 212.51 31.536 112.23 110.536 176.28 181.746 192.25 51.17 11.48 114.41-.08 123.73-20.91 11.55-25.83-34.45-20.76-16.2-76.39z" fill="#fad44c" /><path d="m338.94 82.69c35.63 36.24 18.94 102.07 18.94 102.07l-6.5 28.39-9.73-22.52c6.59-65.19-49.26-100.84-71.84-112.48-5.64-2.91-9.21-4.32-9.21-4.32l-26.95-5.82c-.67-1.96-1.39-3.94-2.15-5.91l25.64.13 29.43-2.09c24.3 2.42 41.02 10.97 52.37 22.55z" fill="#5d8430" /><path d="m338.94 82.69c-11.35-11.58-28.07-20.13-52.37-22.55l-7.87.56c21.329 3.095 36.377 11.183 46.842 21.861 35.63 36.24 18.94 102.07 18.94 102.07l-1.88 8.21 8.775 20.31 6.5-28.39s16.693-65.831-18.937-102.071z" fill="#4e6b28" /><path d="m229.58 57.29-47.65 19.19s-114.77 93.53-68.29 209.27l-4.72 37.06-21.52-38.78s-90.94-155.42 51.67-212.47l43.95-9.38 42.97-13.05c1.24 2.68 2.44 5.41 3.59 8.16z" fill="#5d8430" /><path d="m107.4 284.03s-90.94-155.42 51.67-212.47l43.95-9.38 25.355-7.7c-.779-1.8-1.569-3.587-2.385-5.35l-42.97 13.05-43.95 9.38c-142.61 57.05-51.67 212.47-51.67 212.47l21.52 38.78 3.733-29.313z" fill="#4e6b28" /><path d="m429.029 402.433c-67.915-11.493-144.3-60.89-189.739-155.246-26.31-54.637-27.135-113.491-9.378-159.11-3.53 1.157-6.913 2.37-10.032 3.633-65.59 26.62-105.34 119.21-79.12 212.51 31.54 112.23 110.54 176.28 181.75 192.25 51.17 11.48 114.41-.08 123.73-20.91 11.319-25.312-32.621-20.96-17.211-73.127z" fill="#f5b142" /><g fill="#151515"><path d="m82.187 286.993 21.482 38.73a6 6 0 0 0 11.2-2.152l4.722-37.062a6 6 0 0 0 -.383-2.994 143.273 143.273 0 0 1 -8.621-78.095c3.575-21.371 11.893-43 24.722-64.3a259.12 259.12 0 0 1 49.749-59.433l41.178-16.579q.873 2.3 1.66 4.593c.03.1.069.206.1.308a107.7 107.7 0 0 1 3.237 11.343c-4.687 1.456-9.326 3.059-13.617 4.8-33.476 13.588-61.658 44.434-77.317 84.629-16.21 41.608-18.1 89.573-5.315 135.061 14.893 53 41.715 99.637 77.565 134.878 31.653 31.114 70.238 52.993 108.649 61.606a205.051 205.051 0 0 0 44.322 4.687 209.387 209.387 0 0 0 35.572-2.973c36.771-6.386 47.5-19.053 50.623-26.036 6.451-14.423-1.47-22.715-7.834-29.379-8.694-9.1-17.683-18.514-8.147-47.585 25.81-78.684 30.209-144.53 13.844-207.222-12.043-46.143-52.757-100.667-107.511-116.483-13.436-13.08-31.832-20.864-54.9-23.163a5.982 5.982 0 0 0 -1.019-.014l-29.209 2.069-21.349-.1q-.2-.491-.4-.979c-.012-.031-.021-.064-.033-.1s-.036-.072-.052-.11c-9.9-23.855-24.04-45.9-24.878-47.193a6 6 0 1 0 -10.081 6.508 350.188 350.188 0 0 1 17.434 31.165l-36.063 10.943-43.7 9.335a5.928 5.928 0 0 0 -.975.3c-39.9 15.962-65.948 40.99-77.4 74.389-9.575 27.916-8.648 62.168 2.681 99.054a246.3 246.3 0 0 0 20.064 47.554zm204.292-220.829c24.8 2.575 43.2 12.18 54.7 28.551 24.153 34.384 11.019 88.042 10.885 88.576-.011.044-.023.089-.033.133l-2.414 10.537-1.858-4.3c3.009-34.7-10.647-66.642-39.559-92.462a168.814 168.814 0 0 0 -45.4-28.949 6.171 6.171 0 0 0 -.94-.285l-.206-.044zm-39.595 10.844q-2.011.5-4.093 1.048-.234-1.014-.493-2.039zm21.98 7.429a162.19 162.19 0 0 1 31.346 21.714c26.743 23.883 38.676 52.1 35.466 83.879a6.006 6.006 0 0 0 .462 2.983l9.733 22.521a6 6 0 0 0 5.5 3.619c.183 0 .366-.008.55-.025a6 6 0 0 0 5.3-4.634l6.491-28.33a164.285 164.285 0 0 0 4.048-34.1c.37-22.039-3.821-41.45-12.154-56.761 16.335 7.745 31.882 19.634 45.7 35.094 17.59 19.683 30.609 43.285 36.658 66.456 15.764 60.358 11.436 124.047-13.629 200.447-11.776 35.9 1.853 50.171 10.872 59.613 6.623 6.934 8.574 9.449 5.558 16.192-3.5 7.815-19.872 15.318-41.723 19.112-24.383 4.235-51.8 3.651-75.214-1.6-36.255-8.13-72.786-28.889-102.863-58.455-34.361-33.776-60.1-78.58-74.424-129.566-12.083-43-10.328-88.262 4.943-127.459 14.467-37.133 40.218-65.513 70.65-77.866 16.159-6.559 37.887-11.13 46.73-12.834zm-198.056 59.791c10.235-29.792 33.795-52.3 70.023-66.905l43.44-9.279q.248-.052.489-.126l9.609-2.9.........完整代码请登录后点击上方下载按钮下载查看
网友评论0