使用 CSS 关键帧动画更改内容

发布于07月06日

我使用的是content:'text';到change the text of a div using keyframes，但是div仍然是空的，并且没有任何变化.

#neon-signdiv内的文本没有变化，仍为空:

#neon-sign {
  position: relative;
  font-size: 12em;
  color: var(--accent-color);
  width: 100%;
  text-align: center;
  letter-spacing: 5px;
  line-height: 0.80em;
  font-family: 'Warnes', cursive;
  -webkit-box-reflect: below 0 linear-gradient(transparent, #ff6f150e);
  animation: changetext infinite 8s, neonanimate 5s linear infinite;
  font-weight: 300;
  content: '';
}

@keyframes changetext {
  0% {
    content: 'Hola';
  }
  20% {
    content: 'Hello';
  }
  40% {
    content: 'Salut';
  }
  60% {
    content: 'Ciao';
  }
  80% {
    content: 'Привет';
  }
  100% {
    content: '你好';
  }
}

<div id="neon-sign"></div>

推荐答案

content属性用于伪元素(::before或::after).您需要像本例中那样应用它(我简化了您的CSS):

#neon-sign::before {
  font-size: 12em;
  font-family: 'Warnes', cursive;
  animation: changetext infinite 8s;
  content: '';
}

@keyframes changetext {
  0% { content: 'Hola'; }
  20% { content: 'Hello'; }
  40% { content: 'Salut'; }
  60% { content: 'Ciao'; }
  80% { content: 'Привет'; }
  100% { content: '你好'; }
}