流动色彩文字

这篇教学会运用渐层色文字的效果，搭配 hue-rotate() 改变色相与 @property 自订属性两种方式，搭配渐层色的动画，实作两种有趣的流动色彩文字效果。

延伸阅读：CSS 渐层色文字、双色文字、图片背景文字、CSS 渐层色的转场与动画

快速导览：

• 制作渐层色文字
• 使用 hue-rotate() 改变色相
• 使用 @property 自订属性

制作渐层色文字

当 CSS background-clip 样式属性设定为 text，并将文字原本的颜色设定为“透明色”，就可以将背景裁切成内容文字的形状，产生具有使用背景色彩的文字，下方范例会运用这种方式，产生“渐层色文字”。

• 参考：background-clip 裁切背景
• 线上展示：https://codepen.io/oxxo/pen/QwbrPNz

<!-- HTML 程式碼 -->
<div><h1>漸層色文字</h1></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: max-content;
    background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
    background-clip: text;  /* 按照文字裁切背景 */
  }
  h1 {
    width: max-content;
    margin: 0;
    font-size: 80px;
    color: #0000;     /* 文字顏色設為透明 */
  }
</style>

使用 hue-rotate() 改变色相

可以制作渐层色文字后，第一种制作流动色彩文字的方式，是使用 hue-rotate() 色彩滤镜函数，搭配 CSS 动画不断改变色相的角度，就能实现色彩持续变换流动的效果。

• 参考：CSS 动画 animation、hue-rotate()
• 线上展示：https://codepen.io/oxxo/pen/dPoeLXW

<!-- HTML 程式碼 -->
<div><h1>流動色彩</h1></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: max-content;
    background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
    background-clip: text;
    animation: oxxo 2s infinite linear;
  }
  h1 {
    margin: 0;
    width: max-content;
    font-size: 80px;
    color: #0000;
  }
  @keyframes oxxo {
    0% {filter: hue-rotate(0deg);}     /* 改變色相環角度 */
    100% {filter: hue-rotate(360deg);}
  }
</style>

使用 @property 自订属性

第二种制作流动色彩文字的方式，是使用 @property 定义一个百分比属性，接着就能搭配 CSS 动画不断改变这个数值，实现渐层色的动画，进而产生色彩持续变换流动的效果。

• 参考：CSS 渐层色的转场与动画
• 线上展示：https://codepen.io/oxxo/pen/jEPxRrJ

<!-- HTML 程式碼 -->
<div><h1>流動色彩</h1></div>

<!-- CSS 程式碼 -->
<style>
  @property --p {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }
  div {
    width: max-content;
    /* 注意漸層色使用「重複線性漸層」，位置都有加入 --p */
    background: repeating-linear-gradient(60deg, 
      red var(--p), 
      orange calc(var(--p) + 8%), 
      yellow calc(var(--p) + 16%), 
      green calc(var(--p) + 24%), 
      blue calc(var(--p) + 32%), 
      purple calc(var(--p) + 40%),
      red calc(var(--p) + 50%));
    background-clip: text;
    animation: oxxo 2s infinite linear;
  }
  h1 {
    margin: 0;
    width: max-content;
    font-size: 80px;
    color: #0000;
  }
  @keyframes oxxo {
    0% {--p: 0%;}
    100% {--p: -100%;}
  }
</style>

小结

透过 CSS 的渐层色、滤镜、自订属性，就能做出有趣又吸睛的彩色文字效果，实作过也不复杂，有机会可以运用在自己的网站中。

意见反馈