如何使用CSS和JS创建被动波浪效果按钮

Question

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

我最近来到一个网站，我真的很想知道代码如何创建类似的按钮波效果。在每个特定的时间间隔后，这种波动效果看起来甚至边框和文本的颜色都会发生变化。

我正在谈论的站点是https://www.revcontent.com/。我想要的是导航栏上的“注册”按钮效果。

我也想知道另一种按钮效果。

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

Answer 1

You mentioned text color is changing after every particular interval of time. With CSS animations, you can get a "basic start" down this road.

I'm not sure of your level of coding, but take a look at transitions

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to
• the duration of the effect

Here is a simple example based on an event (i.e. someone hovers over it) which then changes its color and size over time. You can do the same thing and give a similar "illusion" to your original diagram in your post.

The HTML element:

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

The CSS:

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

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

From this point, explore your CSS options with element colors, the text that is within the element itself, opacity effects, durations, all to come close to what you are showing us in your original diagram. Hope this helps.