如何使svg填充的背景去动画纯CSS

How to make a svg-filled background go animating by pure CSS?

本文关键字：动画 CSS 背景 何使 svg 填充      更新时间：2023-09-26

是否有任何纯CSS方法来创建这样的效果?为了让它更容易理解，我用JavaScript做了一个演示来实现它。

http://jsfiddle.net/78h823dd/3/

function renderHandler() {
  x+=offset;
  $("#debug").val(x);
  $('.test').css('background-position', x.toString() + 'px 0');
}

你可以很容易地使用下面的CSS动画:

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 50%; }
}

和添加到CSS的类:

.test {
  /* rest of code */
  animation: animatedBackground 5s linear infinite;
}

将5s更改为较低的时间将加快速度，较高的时间将减慢速度。然而，我不知道有什么方法可以在没有JavaScript的情况下动态地改变它的速度。

小提琴

相关文章：