文字闪亮效果无法正常工作我该如何解决这个问题 [英] Text shining effect not working properly how can I fix this

问题描述

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

const prepareCaption = document.querySelector(".prepareCaption");功能闪耀(){prepareCaption.classList.remove("闪耀");setTimeout(() => prepareCaption.classList.add("shine"), 10);}功能显示(){prepareCaption.style.top = '5vh';prepareCaption.style.opacity = '1';}setTimeout(() => show(), 2500);setTimeout(() => Shine(), 10000);

.prepareCaption {位置:相对；字体大小:3em；过滤器:投影(0px 0px 5px #100021)投影(1px .1em 1px #0d021a)；文本对齐:居中；宽度:100%；颜色:#f50035；边距:0 自动；不透明度:0；顶部:-2.5vh；过渡:顶部 0.3 秒缓入，不透明度 0.3 秒缓入；}.shine {背景图像:线性渐变(-40 度，透明 0%，透明 40%，#fff 50%，透明 60%，透明 100%)；背景位置:-100%, 0%;背景重复:不重复，重复；背景尺寸:10em，自动；-webkit-text-fill-color:透明；-webkit-background-clip:文本；动画:闪耀 2 秒缓入缓出 1；}@-webkit-keyframes 闪耀 {从 { 背景位置:-100%, 0%;}到 { 背景位置:200%, 0%;}}

<p class="prepareCaption">这应该是闪亮的</p>

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

所需的行为是在红色文本上照射一次明亮的闪光效果.

我该如何解决这个问题?

解决方案

你只需要添加一个和文字颜色一样的闪耀背景色即可.

const prepareCaption = document.querySelector(".prepareCaption");功能闪耀(){prepareCaption.classList.remove("闪耀");setTimeout(() => prepareCaption.classList.add("shine"), 10);}功能显示(){prepareCaption.style.top = '5vh';prepareCaption.style.opacity = '1';}setTimeout(() => show(), 2500);setTimeout(() => Shine(), 10000);

.prepareCaption {位置:相对；字体大小:3em；过滤器:投影(0px 0px 5px #100021)投影(1px .1em 1px #0d021a)；文本对齐:居中；宽度:100%；颜色:#f50035；边距:0 自动；不透明度:0；顶部:-2.5vh；过渡:顶部 0.3 秒缓出，不透明度 0.3 秒缓入；}.shine {/* currentColor = 颜色属性 */背景颜色:当前颜色；背景图像:线性渐变(-40 度，透明 0%，透明 40%，#fff 50%，透明 60%，透明 100%)；背景位置:-100% 0%；背景重复:不重复；背景尺寸:60%；-webkit-text-fill-color:透明；-webkit-background-clip:文本；动画:闪耀 4 秒缓出 1 次；}@keyframes 闪耀 {从 {背景位置:-100% 0%；}到 {背景位置:300% 0%；}}

<p class="prepareCaption">这应该是闪亮的</p>

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?

解决方案

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>

这篇关于文字闪亮效果无法正常工作我该如何解决这个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！