Javascript 如何使用css和js创建被动波浪效果按钮

我知道有很多类似的问题，但我想要的是更具体的

我最近访问了一个网站，我真的很想知道如何创建类似的按钮波效果的代码。这种波浪效果看起来就像是边框和文本颜色在每个特定的时间间隔后都在变化

我所说的网站是。导航栏上的注册按钮效果就是我想要的

我还想知道另一种按钮效果

这是我在CSGO游戏新模板/主题发布时想要的东西

---

您提到的

文本颜色在每个特定的时间间隔后都会发生变化。

有了CSS动画，你可以在这条路上有一个“基本的开始”

我不确定你的编码水平，但看看

要创建过渡效果，必须指定两项：

• 要添加效果的CSS属性
• 影响的持续时间

下面是一个简单的例子，它基于一个事件（即有人悬停在它上面），然后随时间改变它的颜色和大小。你也可以做同样的事情，给你的帖子中的原始图表一个类似的“错觉”

HTML元素：

<span class="slider"></span>

---

从这一点出发，通过元素颜色、元素本身中的文本、不透明度效果、持续时间来探索CSS选项，所有这些都接近于您在原始图表中向我们显示的内容。希望这有帮助

也许会有帮助是的，实际上有比我要求的更多的动画，我会尝试编辑它，尝试得到我所需要的，但我还不太擅长css中的动画。希望有人能帮我。无论如何谢谢你。谢谢你的回答，但我唯一的问题是如何使它被动地工作，比如，即使不需要悬停或类似的事件。但这对双方都有帮助。

.slider {
  display: block;
  height: 25px;
  width: 0;
  background-color: black;
  transition: 0.25s ease;
 }

 .slider:hover {
   width: 100%;
   background-color: green;
 }