我怎样才能让这个无缝的 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 {

  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;

}