javascript - 如何使这种无缝的SVG岩石纹理闪闪发光

我在this图片中有石头：

.rock {
  width: 100%;
  height: 200vh;
}

.rock:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(rock.svg);
  background-size: 384px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(transparent 0%, #fff 10%, #fff 90%, transparent 100%);
  mask-image: linear-gradient(transparent 0%, #fff 10%, #fff 90%, transparent 100%);
  /*box-shadow: inset 0 0 0 2px black;*/
}

SVG本质上看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
  ...
  <path d="M61.639,162.195c0.483-0.863,0.887-1.493,1.114-1.659l-0.859,0.215C61.757,161.203,61.694,161.695,61.639,162.195z"/>
  <path d="M62.753,160.536l0.141-0.035C62.86,160.477,62.812,160.493,62.753,160.536z"/>
  <path d="M53.959,179.342c-2.256,3.034-3.331,7.56-4.521,10.83C50.734,186.206,53.188,183.417,53.959,179.342z"/>
  <path d="M53.959,179.342c0.363-0.488,0.754-0.942,1.184-1.342l-1,0.25C54.104,178.631,54.027,178.984,53.959,179.342z"/>
  <path d="M159.644,110l2-4c-2.467,3.473-4.598,7.94-5.592,11.998C157.587,115.744,158.907,112.613,159.644,110z"/>
  <path d="M117.162,179.287c0.024-0.063,0.059-0.096,0.09-0.138c-0.964-0.864-1.931-1.724-2.905-2.571
    C115.11,177.611,116.044,178.677,117.162,179.287z"/>
  <path d="M117.894,178.75c-0.193,0.177-0.464,0.158-0.642,0.398c1.052,0.944,2.1,1.896,3.142,2.852L117.894,178.75z"/>
  <path d="M182.939,156.556c-0.409,0.524-0.674,1.081-0.725,1.665c0.221,0.015,0.454-0.017,0.692-0.066
    c2.024-0.429,4.557-3.049,5.555-5.277C186.501,153.797,184.119,155.045,182.939,156.556z"/>
  <path d="M188.894,151.25c-0.012,0.482-0.17,1.041-0.432,1.627c0.984-0.461,1.866-0.842,2.432-1.127L188.894,151.25z"/>
</g>
</svg>

我在这样的HTML中使用它：

<div class='rock'></div>

问题是，我该如何改为深入SVG并分别对每块岩石进行动画处理，以使每块岩石看起来像随机地淡入和淡出。

最佳答案

对于@ zero298，如果将SVG用作背景图片，则无法执行此操作，因此必须将其直接嵌入页面中。也就是说，如果直接将其嵌入，则有可能：

首先，在每个岩石路径上添加一个单独的id或class（我建议随机添加五个类；我们将它们称为fast，mediumfast，medium，mediumslow，slow。然后，创建CSS中的一个简单的关键帧动画-如下所示：

@keyframes fadeInOut {
  start {
    opacity: 1;
  }

  end {
    opacity: 0.8; // Modify this value to change how extreme the fading is
  }
}

现在，您需要将动画应用于岩石。为了使其“闪烁”，我将使用几个不同的动画持续时间，以使它们不会一起消失。它们全部将共享一些相同的属性，如下所示：

#yourSVGId path {
  animation: fadeInOut 1s ease infinite alternate;
}

.fast {
  animation-duration: 0.3s;
}

.mediumfast {
  animation-duration: 0.5s;
}

.medium {
  animation-duration: 0.7s;
}

.mediumslow {
  animation-duration: 0.9s;
}

.slow {
  animation-duration: 1.1s;
}