主页 / 问题 / 1304449
Accepted
Monkey Mutant
Asked:2022-07-12 17:44:01 +0000 UTC2022-07-12 17:44:01 +0000 UTC

动画加载器“无限的标志”

  • 772

我想从 gif 重复所有动画

为了做到这一点，我画了这条蛇，甚至把这条蛇弄得歪歪扭扭的，但我不明白需要做什么才能在动画的一开始就没有侧柱，以及如何制作类似的光晕

在此处输入图像描述

这是我的尝试

<svg width="400" viewBox="0 0 609.38 279.68" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(198.07 -4.5882)">
  <path d="m-70.02 279.95c-29.907-1.6357-56.417-11.813-78.052-29.964-6.0632-5.0869-13.525-13.006-18.604-19.744-15.537-20.613-24.346-44.903-26.818-73.951-0.42004-4.9366-0.41761-18.147 4e-3 -22.754 2.9007-31.687 15.735-59.855 37.48-82.258 23.29-23.995 53.139-38.262 87.048-41.607 4.5623-0.45002 18.788-0.45559 23.548-0.0092 37.496 3.5162 69.373 19.864 109.93 56.378 7.109 6.3997 16.018 14.968 28.148 27.073 10.478 10.456 13.338 13.172 13.87 13.172 0.53239 0 3.5209-2.8317 14.451-13.692 14.073-13.984 18.174-17.925 25.76-24.753 38.255-34.437 72.993-52.945 108.54-57.829 7.1174-0.97794 10.82-1.2078 19.182-1.1908 16.348 0.03321 30.326 2.3376 46.302 7.6335 20.105 6.6647 35.662 16.185 49.347 30.2 14.997 15.358 25.492 34.841 31.98 59.368 7.5177 28.42 6.5109 57.404-2.9061 83.663-8.6577 24.141-24.084 45.291-44.788 61.403-11.428 8.8942-25.715 16.572-39.736 21.355-34.463 11.756-71.614 9.3193-106.08-6.9576-14.867-7.0208-30.596-17.476-47.511-31.581-11.513-9.6-20.607-18.075-38.634-36.001-12.885-12.813-15.351-15.152-15.98-15.152-0.61733 0-1.5987 0.87823-5.7977 5.1886-11.24 11.538-29.556 29.087-39.192 37.551-23.435 20.585-44.235 34.237-65.082 42.716-14.704 5.9806-31.066 9.9048-47.493 11.391-3.2145 0.29075-15.782 0.52676-18.918 0.35525zm15.25-55.132c14.91-0.78415 27.848-4.3352 42.561-11.682 15.648-7.8134 30.032-18.303 49.609-36.178 5.8064-5.3016 31.796-31.355 32.037-32.116 0.14007-0.4413-0.27758-0.98323-2.1736-2.8205-1.2909-1.2508-8.7169-8.4734-16.502-16.05-17.427-16.96-21.976-21.222-29.501-27.639-19.76-16.851-37.606-26.987-55.329-31.426-8.7162-2.1831-14.464-2.8146-23.773-2.6117-10.632 0.23171-18.69 1.8413-28.054 5.6036-23.755 9.544-41.568 30.062-47.896 55.172-2.9576 11.735-3.2389 22.754-0.9017 35.322 2.5757 13.85 7.5166 25.444 15.278 35.851 2.9692 3.9811 9.5786 10.586 13.592 13.583 12.056 9.0014 26.49 14.144 42.02 14.972 2.11 0.11251 3.896 0.2215 3.9688 0.24221 0.0728 0.0207 2.3515-0.0791 5.0639-0.22172zm333.23-0.37342c18.216-2.3838 33.623-9.7698 46.372-22.231 6.7217-6.5698 11.946-13.698 15.886-21.675 7.9596-16.116 10.391-33.23 7.2779-51.235-3.7747-21.833-14.531-39.765-30.789-51.329-8.6978-6.1865-19.627-10.702-30.434-12.574-9.8125-1.7001-21.425-1.5954-31.709 0.28582-25.286 4.6255-49.591 18.828-79.414 46.406-9.8671 9.1243-32.017 31.525-32.017 32.379 0 0.40409 1.2235 1.7441 4.0302 4.414 2.2166 2.1086 9.0925 8.7826 15.28 14.831 17.681 17.285 24.951 23.946 34.533 31.637 17.242 13.841 33.981 22.91 49.742 26.951 5.1841 1.329 8.4804 1.8731 15.875 2.6202 2.1412 0.21635 12.524-0.108 15.367-0.48005z" />
   
  <path d="m81.643 116.42c-11.805-11.887-23.24-24.264-36.286-34.774-13.007-10.479-26.503-20.775-41.577-27.97-15.465-7.382-32.054-13.762-49.137-15.119-18.011-1.431-36.691 1.3912-53.673 7.5595-14.787 5.3711-29.333 13.443-40.065 24.946-12.842 13.764-21.634 31.697-26.458 49.893-4.1997 15.839-4.9784 33.121-1.5119 49.137 3.6236 16.742 11.206 33.393 22.679 46.113 11.753 13.031 27.976 22.352 44.601 27.97 20.856 7.0486 43.992 9.285 65.768 6.0476 21.8-3.241 42.778-12.897 61.232-24.946 19.397-12.665 33.829-31.689 49.893-48.381 11.507-11.957 33.262-37.042 33.262-37.042s34.826-40.602 55.94-56.696c17.226-13.131 36.341-24.346 56.696-31.75 22.897-8.3287 47.721-17.221 71.815-13.607 20.845 3.1267 40.692 14.93 55.94 29.482 10.786 10.294 17.607 24.533 22.679 38.554 5.2987 14.647 7.997 30.543 7.5595 46.113-0.3915 13.934-2.6636 28.443-9.0714 40.821-6.7246 12.991-17.618 23.949-29.482 32.506-15.19 10.955-32.846 20.166-51.405 22.679-23.978 3.2468-49.084-2.2907-71.815-10.583-18.92-6.9022-35.611-19.254-51.405-31.75-12.576-9.95-22.839-22.52-34.018-34.018-17.644-18.148-34.324-37.225-52.161-55.185z" fill="none" stroke="#fff" stroke-width="40" id="line" stroke-dasharray="400 1496">
    <animate attributeName="stroke-dashoffset" 
             dur="3s"
             begin="0s"
             values="-400; -1396"
             repeatCount="indefinite"/>
  </path>
 </g>
</svg>

css

2 个回答

  1. Best Answer

    凭借我的知识绘制了SVG，但无法使用<use>和避免代码重复：

    .infinite {
  position: relative;
  height: 320px; width: 500px;
}

.infinite svg { position: absolute; }

.gradient {
  height: 320px; width: 500px;
}
.gradient::before,
.gradient::after {
  content: "";
  position: absolute;
  top: 0; z-index: -1;
  height: 320px; width: 320px;
  animation: 4s steps(1, start) infinite;
}
.gradient::before {
  background-image: conic-gradient( from 90deg, #34ef91, #34ef4b, #63ef34, #a9ef34, #efef34, #efa934, #ef6334, #ef344b, #ef3491);
  left: 0; animation-name: before;
}
.gradient::after {
  background-image: conic-gradient( from 270deg, #34ef91, #34efd7, #34c0ef, #347aef, #3434ef, #7a34ef, #c034ef, #ef34d7, #ef3491);
  right: 0; animation-name: after;
}
@keyframes before {
  from, to { clip-path: polygon( 0px 0px, 220px 0px, 220px 160px, 320px 160px, 320px 320px, 0px 320px); }
  50% { clip-path: polygon( 0px 0px, 320px 0px, 320px 160px, 220px 160px, 220px 320px, 0px 320px); }
}
@keyframes after {
  from, to { clip-path: polygon( 60px 0px, 320px 0px, 320px 320px, 100px 320px, 100px 160px, 15px 160px); }
  50% { clip-path: polygon( 45px 160px, 100px 160px, 100px 0px, 320px 0px, 320px 320px, 45px 320px); }
}

body { margin: 0; height: 100vh; background-color: #482455; background-image: url("https://isstatic.askoverflow.dev/m9NKc.png"), radial-gradient(#fff1, #000c); background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; display: flex; flex-flow: column; justify-content: space-around; align-items: center; overflow: hidden; }
    <div class="infinite">
  <svg width="500" height="320" viewBox="0 0 500 320">
    <path d="M 70 160 A 1 1 0 1 1 250 160 A 1 1 0 0 0 430 160 A 1 1 0 0 0 250 160 A 1 1 0 0 1 70 160 Z" fill="transparent" stroke="#0003" stroke-width="50"></path>
    <mask id="mask">
      <path d="M 70 160 A 1 1 0 1 1 250 160 A 1 1 0 0 0 430 160 A 1 1 0 0 0 250 160 A 1 1 0 0 1 70 160 Z" stroke="#fff" stroke-linecap="round" stroke-dasharray="330,800" stroke-dashoffset="1130px" stroke-width="50" style="filter: blur(3px)">
        <animate attributeName="stroke-dashoffset" dur="4s" begin="0.55s" values="0;-1130px" repeatCount="indefinite" />
      </path>
    </mask>
    <foreignobject x="0" y="0" width="500" height="320" mask="url(#mask)">
      <div class="gradient"></div>
    </foreignobject>
  </svg>
  <svg width="500" height="320" viewBox="0 0 500 320" style="filter: blur(20px)">
    <mask>
      <path d="M 70 160 A 1 1 0 1 1 250 160 A 1 1 0 0 0 430 160 A 1 1 0 0 0 250 160 A 1 1 0 0 1 70 160 Z" stroke="#fff" stroke-linecap="round" stroke-dasharray="330,800" stroke-dashoffset="1130px" stroke-width="48">
        <animate attributeName="stroke-dashoffset" dur="4s" begin="0.55s" values="0;-1130px" repeatCount="indefinite" />
      </path>
    </mask>
    <foreignobject x="0" y="0" width="500" height="320" mask="url(#mask)">
      <div class="gradient"></div>
    </foreignobject>
  </svg>
</div>

    另一个问题 - 有时，在启动时，梯度变化的动画会发生不同步（出现在环的交点处）。它通过重新运行代码来解决（可能我只是没有足够的 RAM，但也可能出现渲染故障）。

    • 15

  2. SVG主题的变化：

    body {
    background: #210E3F;
}
    <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="background: #210E3F"
     viewBox="0 0 100 100"
>
    <!--Градиент-->
    <linearGradient id="linear-gradient">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
    </linearGradient>

    <!--Иконка-->
    <symbol id="infinite" viewBox="0 0 100 110">
        <path fill="none"
              stroke-width="12"
              stroke-linecap="round"
              d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
        />
    </symbol>

    <!--Фон-->
    <use xlink:href="#infinite"
         stroke="#0D0C2F"
    />

    <!--Анимация-->
    <use xlink:href="#infinite"
         style="filter: blur(1px)"
         stroke="url(#linear-gradient)"
         stroke-dasharray="128 128"
    >
        <animate attributeName="stroke-dashoffset"
                 repeatCount="indefinite"
                 dur="5s"
                 values="0;256"
        />
    </use>
</svg>

    • 8

相关问题