Question

我在我的网站（http://marekcmarko.xyz）上使用这个CSS3文本闪耀渐变动画，但如果你在网站上滚动并停在应用它的标题上它会一直闪烁：

.textShineBlack {
background: linear-gradient(to right, #000 20%, #bada55 30%, #bada44 70%, #000 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 200% auto;
animation: textShine 7s ease-in-out infinite;


@keyframes textShine {
to {
    background-position: 200%;
}

任何人都知道我应该怎样做才能摆脱那种眨眼？我不知道......我无法对此进行截图 - 如果它甚至可能的话，不知道。

Answer 1

问题在于您将动画设置为无限，因此当它结束时，它将立即重新启动以获得初始状态。为避免这种情况，您可以将alternate添加到动画中：

＆＃13;

.textShineBlack {
  background: linear-gradient(to right, #000 20%, #bada55 30%, #bada44 70%, #000 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 200% auto;
  animation: textShine 7s ease-in-out infinite alternate;
}

@keyframes textShine {
  to {
    background-position: 200%;
  }
}

＆＃13;

<h1 class="textShineBlack">SOME text</h1>

＆＃13;

文本渐变CSS 3动画

1 个答案: