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

Question

I want to add a shine effect over the given text so I have this:

 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>

As you see it doesn't work correctly and the text hides right after adding shine class.

The desired behavior is to shine the bright shining effect over the red text once.

How can I fix this?

Answer 1

You just need to add a background color of the shine the same as the text color.

 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>