基于True/Fase条件的波纹线条颜色

<div id="ripple" class="ripple"></div>

.ripple {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ccc;
  opacity: 0.5;
  transition: background-color 0.5s ease;
}

.ripple.active::before {
  background-color: #ff0000;
}

var rippleElement = document.getElementById("ripple");

function toggleRippleColor(condition) {
  if (condition) {
    rippleElement.classList.add("active");
  } else {
    rippleElement.classList.remove("active");
  }
}

// 示例：根据条件的真假来切换波纹线条颜色
toggleRippleColor(true);