javascript - 文字闪亮效果无法正常工作我该如何解决这个问题

Question

我想在给定的文本上添加光泽效果，所以我有这个：

const prepareCaption = document.querySelector(".prepareCaption");

function Shine() {
    prepareCaption.classList.remove("shine");
    setTimeout(() => prepareCaption.classList.add("shine"), 10); 
}
 
function show() {
    prepareCaption.style.top = '5vh';
  prepareCaption.style.opacity = '1';
}


setTimeout(() => show(), 2500);

setTimeout(() => Shine(), 10000);

.prepareCaption {
  position: relative;
  font-size: 3em;
  filter: drop-shadow(0px 0px 5px #100021) drop-shadow(1px .1em 1px #0d021a);
  text-align: center;
  width: 100%;
  color: #f50035;
  margin: 0 auto;
  opacity: 0; 
  top: -2.5vh;
  transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.shine {
  background-image: linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position: -100%, 0%;
  background-repeat: no-repeat, repeat;
  background-size: 10em, auto;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: shine 2s ease-in-out 1;
}

@-webkit-keyframes shine {
  from { background-position: -100%, 0%; }
  to { background-position: 200%, 0%; }
}

<div class="prepare-container">
        <p class="prepareCaption">This should be shining</p>
</div>

如您所见，它无法正常工作，并且在添加闪耀类后文本立即隐藏。

期望的行为是在红色文本上闪耀一次明亮的闪光效果。

我怎样才能解决这个问题？

标签： javascripthtmlcss

Answer 1

您只需要添加与文本颜色相同的光泽背景颜色即可。

const prepareCaption = document.querySelector(".prepareCaption");

function Shine() {
  prepareCaption.classList.remove("shine");
  setTimeout(() => prepareCaption.classList.add("shine"), 10);
}

function show() {
  prepareCaption.style.top = '5vh';
  prepareCaption.style.opacity = '1';
}


setTimeout(() => show(), 2500);

setTimeout(() => Shine(), 10000);

.prepareCaption {
  position: relative;
  font-size: 3em;
  filter: drop-shadow(0px 0px 5px #100021) drop-shadow(1px .1em 1px #0d021a);
  text-align: center;
  width: 100%;
  color: #f50035;
  margin: 0 auto;
  opacity: 0;
  top: -2.5vh;
  transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.shine {
  /* currentColor = color property */
  background-color: currentColor;
  background-image: linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position: -100% 0%;
  background-repeat: no-repeat;
  background-size: 60%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: shine 4s ease-out 1 forwards;
}

@keyframes shine {
  from {
    background-position: -100% 0%;
  }
  to {
    background-position: 300% 0%;
  }
}

<div class="prepare-container">
  <p class="prepareCaption">This should be shining</p>
</div>