如何使用 JavaScript 使用按钮在 html 中的元素之间循环

Question

如果您使用 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;

}

Answer 1

您应该为显示的 div 提供一个 css 类，然后隐藏（或提供一个“隐藏”类）没有该类的所有其他 div。它将使您的代码具有可扩展性并减少冗余。