svg动态图标

最新推荐文章于 2024-07-04 10:06:01 发布
萧寂173
最新推荐文章于 2024-07-04 10:06:01 发布
阅读量446
点赞数
文章标签： html css javascript
本文链接：https://blog.csdn.net/weixin_68658847/article/details/129725766
版权
<!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>
      .icon {
        /* 填充颜色 */
        fill: none;
        /* 图形元素外轮廓颜色 */
        stroke: blue;
        /* 图形元素外轮廓宽度 */
        stroke-width: 3;
        /* 两端的形状 */
        stroke-linecap: round;
      }
      @keyframes move {
        0% {
          /* 固定线条宽度和间距,第一个值是线条长度,定值是空隙距离 */
          stroke-dasharray: 0, 600px;
        }
        100% {
          stroke-dasharray: 600px, 0;
        }
      }
      .icon:hover {
        animation: move 1s;
      }
    </style>
  </head>
  <body>
    <div>
      <svg
        t="1679538046586"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1368"
        width="200"
        height="200"
      >
        <path
          d="M479.19104 482.95936m-321.76128 0a321.76128 321.76128 0 1 0 643.52256 0 321.76128 321.76128 0 1 0-643.52256 0Z"
          fill="#FF8E9E"
          p-id="1369"
          class="icon1"
        ></path>
        <path
          d="M253.952 482.95936c0-161.23904 118.5792-294.74816 273.28512-318.13632-15.68768-2.3552-31.72352-3.62496-48.04608-3.62496-146.98496 0-270.9504 98.54976-309.41184 233.18528H140.12416c-32.01024 0-57.93792 25.94816-57.93792 57.93792v61.27616c0 32.01024 25.94816 57.93792 57.93792 57.93792H169.7792c38.46144 134.63552 162.42688 233.18528 309.41184 233.18528 16.34304 0 32.37888-1.29024 48.04608-3.62496C372.55168 777.70752 253.952 644.17792 253.952 482.95936z"
          fill="#FF8E9E"
          p-id="1370"
          class="icon1"
        ></path>
        <path
          d="M788.62336 571.53536h33.54624c32.01024 0 57.93792-25.94816 57.93792-57.93792v-61.27616c0-32.01024-25.94816-57.93792-57.93792-57.93792h-33.54624c-34.2016-119.66464-135.94624-210.75968-261.36576-229.56032C372.55168 188.19072 253.952 321.72032 253.952 482.95936s118.5792 294.74816 273.28512 318.13632c125.41952-18.80064 227.18464-109.89568 261.38624-229.56032z"
          fill="#FFB5C0"
          p-id="1371"
          class="icon1"
        ></path>
        <path
          d="M479.19104 815.37024c-73.68704 0-143.50336-23.61344-201.87136-68.3008-54.35392-41.61536-95.1296-99.92192-115.46624-164.88448H140.12416c-37.82656 0-68.58752-30.76096-68.58752-68.58752v-61.27616c0-37.82656 30.76096-68.58752 68.58752-68.58752h21.72928c20.33664-64.96256 61.11232-123.2896 115.46624-164.88448 58.368-44.68736 128.18432-68.3008 201.87136-68.3008 23.08096 0 46.14144 2.37568 68.52608 7.0656 5.75488 1.20832 9.44128 6.84032 8.23296 12.5952a10.6496 10.6496 0 0 1-12.5952 8.23296 313.97888 313.97888 0 0 0-64.16384-6.61504c-138.21952 0-261.26336 92.71296-299.19232 225.46432l-2.21184 7.72096h-37.6832c-26.09152 0-47.3088 21.21728-47.3088 47.3088v61.27616c0 26.09152 21.21728 47.3088 47.3088 47.3088h37.6832l2.21184 7.72096c37.92896 132.75136 160.9728 225.46432 299.19232 225.46432s261.24288-92.71296 299.19232-225.46432l2.21184-7.72096h41.5744c26.09152 0 47.3088-21.21728 47.3088-47.3088v-61.27616c0-26.09152-21.21728-47.3088-47.3088-47.3088h-41.5744l-2.21184-7.72096c-18.06336-63.22176-56.832-120.27904-109.1584-160.72704a10.633216 10.633216 0 0 1-1.90464-14.92992 10.633216 10.633216 0 0 1 14.92992-1.90464c53.76 41.53344 94.12608 99.5328 114.29888 163.98336h25.62048c37.82656 0 68.58752 30.76096 68.58752 68.58752v61.27616c0 37.82656-30.76096 68.58752-68.58752 68.58752h-25.62048c-20.33664 64.96256-61.11232 123.2896-115.46624 164.88448-58.38848 44.68736-128.18432 68.32128-201.89184 68.32128z"
          p-id="1372"
          class="icon1"
        ></path>
        <path
          d="M479.19104 482.95936m-225.23904 0a225.23904 225.23904 0 1 0 450.47808 0 225.23904 225.23904 0 1 0-450.47808 0Z"
          fill="#FF8E9E"
          p-id="1373"
          class="icon1"
        ></path>
        <path
          d="M479.19104 718.82752c-130.06848 0-235.86816-105.82016-235.86816-235.86816s105.82016-235.86816 235.86816-235.86816 235.86816 105.82016 235.86816 235.86816-105.79968 235.86816-235.86816 235.86816z m0-450.47808c-118.33344 0-214.60992 96.27648-214.60992 214.60992S360.87808 697.5488 479.19104 697.5488s214.60992-96.27648 214.60992-214.60992-96.27648-214.58944-214.60992-214.58944z"
          p-id="1374"
          class="icon1"
        ></path>
        <path
          d="M552.73472 611.84c66.23232-66.41664 94.0032-197.16096 48.7424-242.2784-42.88512-42.76224-175.9232-16.97792-242.15552 49.43872-48.66048 48.78336-53.49376 94.04416-29.16352 138.07616L109.42464 747.99104c-34.67264 31.21152-36.0448 85.11488-3.01056 118.04672 33.03424 32.93184 86.9376 31.41632 118.04672-3.33824l190.30016-221.30688c44.09344 24.20736 89.33376 19.23072 137.97376-29.55264z"
          fill="#2ED0FC"
          p-id="1375"
          class="icon1"
        ></path>
        <path
          d="M552.73472 611.84c66.23232-66.41664 94.0032-197.16096 48.7424-242.2784-42.88512-42.76224-175.9232-16.97792-242.15552 49.43872-48.66048 48.78336-53.49376 94.04416-29.16352 138.07616l-86.36416 74.69056c6.77888 50.7904 25.14944 100.33152 55.0912 144.34304l115.83488-134.71744c44.1344 24.20736 89.37472 19.23072 138.01472-29.55264z"
          fill="#7CE3FF"
          p-id="1376"
          class="icon1"
        ></path>
        <path
          d="M163.75808 900.42368c-24.49408 0-47.43168-9.48224-64.86016-26.84928-18.06336-18.00192-27.648-41.984-27.01312-67.4816 0.65536-25.4976 11.44832-48.9472 30.4128-66.00704l15.31904-13.25056a10.63936 10.63936 0 0 1 15.01184 1.08544 10.63936 10.63936 0 0 1-1.08544 15.01184l-15.1552 13.1072c-14.41792 12.98432-22.71232 31.00672-23.22432 50.60608-0.49152 19.59936 6.8608 38.03136 20.74624 51.87584 13.88544 13.84448 32.37888 21.15584 51.93728 20.60288 19.59936-0.55296 37.60128-8.9088 50.688-23.51104l195.76832-227.67616 7.55712 4.15744c43.06944 23.6544 82.88256 14.848 125.3376-27.72992 29.88032-29.96224 53.53472-76.22656 63.2832-123.76064 9.48224-46.26432 4.05504-84.95104-14.52032-103.48544-36.02432-35.90144-161.83296-16.05632-227.10272 49.41824-42.45504 42.57792-51.15904 82.41152-27.38176 125.41952l4.17792 7.55712-148.97152 128.83968a10.63936 10.63936 0 0 1-15.01184-1.08544 10.63936 10.63936 0 0 1 1.08544-15.01184l136.11008-117.71904c-23.12192-48.47616-11.40736-96.5632 34.9184-143.01184 70.0416-70.2464 209.44896-97.05472 257.18784-49.4592 24.02304 23.9616 31.4368 68.73088 20.33664 122.83904-10.5472 51.42528-36.37248 101.72416-69.05856 134.51264-46.32576 46.44864-94.35136 58.30656-142.90944 35.30752l-184.832 214.95808c-17.16224 19.16928-40.57088 30.02368-66.06848 30.76096-0.88064-0.04096-1.78176-0.02048-2.68288-0.02048z"
          p-id="1377"
          class="icon1"
        ></path>
        <path
          d="M384.62067 474.064974a34.28352 26.64448 44.918 1 0 37.627018-37.734874 34.28352 26.64448 44.918 1 0-37.627018 37.734874Z"
          fill="#FF8E9E"
          p-id="1378"
          class="icon1"
        ></path>
        <path
          d="M427.08992 451.76832c-2.72384 0-5.4272-1.024-7.51616-3.11296a10.643456 10.643456 0 0 1-0.02048-15.0528l12.82048-12.86144c4.15744-4.15744 10.89536-4.17792 15.0528-0.02048a10.643456 10.643456 0 0 1 0.02048 15.0528l-12.82048 12.86144a10.625024 10.625024 0 0 1-7.53664 3.13344z"
          p-id="1379"
          class="icon1"
        ></path>
        <path
          d="M497.610171 586.716397a34.28352 26.64448 44.918 1 0 37.627018-37.734874 34.28352 26.64448 44.918 1 0-37.627018 37.734874Z"
          fill="#FF8E9E"
          p-id="1380"
          class="icon1"
        ></path>
        <path
          d="M523.55072 547.96288c-2.72384 0-5.4272-1.024-7.51616-3.11296a10.643456 10.643456 0 0 1-0.02048-15.0528l12.82048-12.86144a10.643456 10.643456 0 1 1 15.07328 15.03232l-12.82048 12.86144a10.471424 10.471424 0 0 1-7.53664 3.13344zM495.43168 514.62144c-0.53248 0-1.06496-0.04096-1.59744-0.12288-32.74752-4.9152-41.3696-30.12608-41.3696-42.74176 0-5.87776 4.77184-10.62912 10.62912-10.62912h0.02048c5.8368 0 10.56768 4.7104 10.62912 10.5472 0.08192 3.11296 1.61792 18.5344 23.2448 21.79072 5.81632 0.88064 9.80992 6.28736 8.92928 12.10368a10.60864 10.60864 0 0 1-10.48576 9.05216z"
          p-id="1381"
          class="icon1"
        ></path>
      </svg>
    </div>
  </body>
</html>