Question

我有CSS动画渐变

.test {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(90deg,#e2e2e2,#e2e2e2,#e2e2e2,#f2f2f2,#e2e2e2,#e2e2e2,#e2e2e2);
    background-size: 300% 300%;
    animation: test 3s linear infinite;
}

@keyframes test{0%{background-position:150% 150%}to{background-position:-150% -150%}}

<div class="test"></div>

但是我需要使用svg创建它。然后我创建了它

.test {
  width: 100px;
  height: 100px;
}

<div class="test">
  <svg id="svg-test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <style type="text/css">
    .rect {
      fill: url(#linear-gradient);
    }
  </style>
  <defs>
  <linearGradient id="linear-gradient">
    <stop offset="0%" stop-color="#e2e2e2" />
    <stop offset="43%" stop-color="#e2e2e2" />
    <stop offset="50%" stop-color="#f2f2f2" />
    <stop offset="57%" stop-color="#e2e2e2" />
    <stop offset="100%" stop-color="#e2e2e2" />
  </linearGradient>
  </defs>
	<rect class="rect" x="-200" y="-200" width="300" height="300">
    <animateTransform attributeName="transform"
      type="translate"
      from="0 0"
      to="200 200"
      begin="0s"
      dur="1.5s"
      repeatCount="indefinite"
    />
  </rect>
</svg>
</div>

但是我有一个问题，因为它仅在正方形时效果很好。我需要处理所有数字。然后我尝试了这段代码

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<linearGradient id="myG">
    <stop offset="0%" stop-color="#f2f2f2">
	    <animate attributeName="offset" dur="1.5s" from="0" to="1" repeatCount="indefinite" />
    </stop>
    <stop offset="0%" stop-color="#e2e2e2" />>
    <stop offset="43%" stop-color="#e2e2e2" />
    <stop offset="50%" stop-color="#e2e2e2">
    </stop>
    <stop offset="57%" stop-color="#e2e2e2" />
    <stop offset="100%" stop-color="#e2e2e2" />	
</linearGradient> 
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#myG)" />
</svg>

这比我的CSS动画更好，但不一样。您能帮我从第一个示例中创建与CSS渐变相同的SVG动画渐变吗？

Answer 1

这样的事情怎么样？

.test {
  width: 100px;
  height: 100px;
}

<svg class="test" viewBox="0 0 100 100">
  <style type="text/css">
    .rect {
      fill: url(#linear-gradient);
    }
  </style>
  <defs>
    <linearGradient id="linear-gradient">
      <stop offset="0%" stop-color="#e2e2e2" />
      <stop offset="33%" stop-color="#e2e2e2" />
      <stop offset="50%" stop-color="#f2f2f2" />
      <stop offset="67%" stop-color="#e2e2e2" />
      <stop offset="100%" stop-color="#e2e2e2" />
      <animateTransform attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="0s"
        dur="1.5s"
        repeatCount="indefinite"/>
    </linearGradient>
  </defs>

  <rect class="rect" x="-100" y="-100" width="300" height="300"/>
</svg>

Answer 2

此动画是通过CSS“ @keyfrem”规则创建的。您可以通过'@keyfrem'创建任何类型的CSS动画。

您需要了解所有相关信息。有用的链接以了解这一点。

https://www.w3schools.com/css/css3_animations.asp

您还可以通过在线工具生成动画并复制现成的代码。如下所示。

http://cssanimate.com/

您可以从此处创建CSS证书。

https://www.cssmatic.com/gradient-generator

如何创建这样的动画svg渐变？

2 个答案: