我怎样才能让这个无缝的 SVG 岩石纹理闪闪发光

Question

我在这张图片中有石头：

.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"/>

</g>

</svg>

我在 HTML 中使用它，如下所示：

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

问题是，我如何才能深入研究 SVG 并分别为每块岩石设置动画，使每块岩石看起来随机淡入淡出，闪闪发光。

Answer 1

如果您使用 SVG 作为背景图像，则无法执行此操作，因此您必须将其直接嵌入到页面中。也就是说，如果您直接嵌入它，则可能：首先，添加一个个体id或class每个岩石路径（我建议随机添加五个类；让我们称它们为fast, mediumfast, medium, mediumslow, slow。然后，在 CSS 中创建一个简单的关键帧动画 - 像这样：@keyframes fadeInOut {&nbsp; start {&nbsp; &nbsp; opacity: 1;&nbsp; }&nbsp; end {&nbsp; &nbsp; opacity: 0.8; // Modify this value to change how extreme the fading is&nbsp; }}现在您需要将动画应用到岩石上。为了让它“闪烁”，我会使用几个不同的动画持续时间，这样它们就不会一起淡出。它们都将共享一些相同的属性，如下所示：#yourSVGId path {&nbsp; animation: fadeInOut 1s ease infinite alternate;}.fast {&nbsp; animation-duration: 0.3s;}.mediumfast {&nbsp; animation-duration: 0.5s;}.medium {&nbsp; animation-duration: 0.7s;}.mediumslow {&nbsp; animation-duration: 0.9s;}.slow {&nbsp; animation-duration: 1.1s;}