Question

我目前正在为一个小组开发一个网站，我试图在单词“＃34;正在加载......＆＃34;所以他们眨眼我已经让动画工作了，但由于某种原因，除非我用光标突出显示文字，否则点不会出现。

＆＃13;

@keyframes blink {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}

.text span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.text span:nth-child(2) {
  animation-delay: .2s;
}

.text span:nth-child(3) {
  animation-delay: .4s;
}

.text {
  width: 300px;
  height: 70px;
  font-size: 30px;
  background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  text-align: center;
  color: white;
}

＆＃13;

<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>

＆＃13;

＆＃34;正在加载＆＃34;部分文字虽然显得很好。有什么想法吗？

由于

Answer 1

您需要一种颜色才能获得透明度。

现在看来，它已经是透明的，所以不透明度什么都不做。如果你有一种颜色（不仅仅是透明的），它会显示相关的百分比，与渐变混合。我在下面的示例中使用黑色作为＆＃34;背景＆＃34;。

＆＃13;

@keyframes blink {
  /* changes the values here */
  0% {
    -webkit-text-fill-color: rgba(0, 0, 0, 0.2);
  }
  20% {
    -webkit-text-fill-color: rgba(0, 0, 0, 1);
  }
  100% {
    -webkit-text-fill-color: rgba(0, 0, 0, 0.2);
  }
}

.text span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.text span:nth-child(2) {
  animation-delay: .2s;
}

.text span:nth-child(3) {
  animation-delay: .4s;
}

.text {
  width: 300px;
  height: 70px;
  font-size: 30px;
  background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  text-align: center;
  color: white;
}

＆＃13;

<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>

＆＃13;

CSS动画点未显示

1 个答案: