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

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>

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

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

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

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>