CSS Cod5 Rain用户名？它可以被编码，如果是这样，我将如何进行编码

Question

所以我是新手使用css和我目前正在使用xenforo的论坛上工作。但是我觉得看到这个效果代替管理员或主持人的用户名是很好的。

如果你们可以帮助我，或者给我一些关于如何去做的信息那就太棒了！

如果您不知道，请播放我的意思： https://www.youtube.com/watch?v=XdL9iDQs3t8

此外，我正在尝试仅在cenforo上的“用户名CSS”字段中使用css。我会继续尝试解决这个问题但是如果你能提供帮助的话，谢谢！

Answer 1

与该视频中的文字最接近的地方是整个短语的彩虹渐变，而不是每个字母的颜色不同。

我在这里创建了一个示例：

.rainbow_text {
  display: inline-block;
  background: black;
  background: linear-gradient(to right, red, orange , yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rainbow_text.animated {
      animation: rainbow_animation 5s ease-in-out infinite;
      background-size: 400%;
}

@keyframes rainbow_animation {
    0%, 100% {
        background-position: 0
    }

    50% {
        background-position: 100%
    }
}

  <h1 class='rainbow_text'>Austen Holland</h1>
  <br>
  <h1 class='rainbow_text animated'>Austen Holland Animated</h1>

有两段CSS使之成为可能。 background-clip / -webkit-background-clip:和color。

将background-clip属性设置为text时，背景会绘制在前景文本中（裁剪）。

将color属性设置为transparent时，文本是..well ..透明的。这样可以从背景显示渐变！

虽然这里有一些陷阱，但browser support与background-clip: text;在一起！ Internet Explorer根本不支持它，而chrome，opera，safari，android都需要-webkit-供应商前缀。诸如edge和firefox之类的浏览器都支持不带前缀的

。