css - CSS Cod5 Rain 用户名？可以编码吗？如果可以，我将如何处理

Question

所以我是使用 css 的新手，我目前正在使用 xenforo 的论坛上工作。但是，我认为用这种效果代替管理员或版主用户名会很好。

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

如果您不知道，这是我的意思的视频： https ://www.youtube.com/watch?v=XdL9iDQs3t8

此外，我试图在 css 中仅针对 xenforo 上的“用户名 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时，文本是.. 好.. 透明的。这允许背景的渐变显示出来！

不过这里有一些问题，那就是浏览器支持background-clip: text;！Internet explorer 根本不支持，chrome、opera、safari、android 都需要-webkit-vendor 前缀。像 edge 和 firefox 这样的浏览器不带前缀就支持它。