渐层色文字、双色文字

这篇教学会使用 CSS 的裁切背景 background-clip 样式属性，产生渐层色文字、双色文字和图片背景文字等效果，最后还会搭配动画 animation 做出有趣的渐层色文字动画和淡出淡出动画。

快速导览：

• 使用 background-clip 制作文字背景效果
• background-clip 应用于多行文字
• 双色文字动画效果

使用 background-clip 制作文字背景效果

CSS background-clip 样式属性如果设定为 text，可以将背景裁切成内容文字的形状，只要将文字原本的颜色设定为“透明色”，就可以产生具有各种特别背景色的文字，下方范例会产生渐层色文字、双色文字以及图片背景文字。

参考：background-clip 裁切背景

线上展示：https://codepen.io/oxxo/pen/yyLKYWV

<!-- HTML 程式碼 -->
<h1 class="a0">OXXO.STUDIO</h1>
<h1 class="a1">OXXO.STUDIO</h1>
<h1 class="a2">OXXO.STUDIO</h1>
<h1 class="a3">OXXO.STUDIO</h1>

<!-- CSS 程式碼 -->
<style>
  h1 {
    margin: 10px;
    padding: 0;
    width: max-content;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    font-size: 80px;
    line-height: 1;
  }
  /* 沒有設定 background-clip 就不會進行裁切 */
  .a0 { 
    background: linear-gradient(#f00,#f90,#fd0,#0c0,#09f);
  }
  .a1 {
    color: #0000;           /* 文字顏色設定為透明 */
    background: linear-gradient(#f00,#f90,#fd0,#0c0,#09f);
    background-clip: text;  /* 設定背景裁切為文字形狀 */
  }
  .a2 {
    color: #0000;           /* 文字顏色設定為透明 */
    background: linear-gradient(#f00 50%,#fa0 50%);
    background-clip: text;  /* 設定背景裁切為文字形狀 */
  }
  .a3 {
    color: #0000;           /* 文字顏色設定為透明 */
    background: url(https://steam.oxxostudio.tw/image/index-css.jpg);
    background-clip: text;  /* 設定背景裁切為文字形狀 */
  }
</style>

background-clip 应用于多行文字

background-clip 会裁切整个背景，如果有“多行文字”，不同行的文字会出现不同的背景，由于这种特性，只要特别指定背景渐层色的位置，就能让不同行的的文字变成不同颜色的效果，下方范例的第二组 p 文字，将渐层背景分成五等份，就能让五行文字呈现不同颜色。

线上展示：https://codepen.io/oxxo/pen/ZYExbNe

<!-- HTML 程式碼 -->
<p class="p1">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域</p>
<p class="p2">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域</p>

<!-- CSS 程式碼 -->
<style>
  p {
    margin: 10px;
    width: 300px;
    font-size: 24px;
    color: #0000;  /* 文字顏色設定為透明 */  
  }
  .p1 {
    background: linear-gradient(#f00,#f90,#fd0,#0c0,#09f);
    background-clip: text;
  }
  .p2 {
    /* 指定漸層色中每個顏色的位置 */
    background: linear-gradient(#f00 20%,
      #f90 20%, #f90 40%,
      #fd0 40%, #fd0 60%,
      #0c0 60%, #0c0 80%,
      #09f 80%);
    background-clip: text;
  }
</style>

双色文字动画效果

透过自订属性 @property 产生背景的渐层色动画，就可以让文字具有颜色变幻的动画效果，下方范例呈现双色背景旋转以及从上到下淡出的文字效果。

参考：CSS @property 自订属性值。

线上展示：https://codepen.io/oxxo/pen/LEYdpor

<!-- HTML 程式碼 -->
<h1>OXXO.STUDIO</h1>
<p>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</p>

<!-- CSS 程式碼 -->
<style>
  /* 自訂義角度屬性 */
  @property --deg {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }
  h1 {
    margin: 10px;
    padding: 0;
    width: max-content;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    font-size: 80px;
    line-height: 1;
    color: #0000;                      /* 文字顏色設定為透明 */
    background: linear-gradient(var(--deg), #f00 50%, #000 50%); /* 套用角度自訂屬性 */
    background-clip: text;
    animation: a 2s linear infinite;   /* 動畫 */
  }       
  /* 動畫改變自訂屬性數值 */
  @keyframes a {
    0%{--deg: 0deg;}
    100%{--deg: 360deg;}
  }
  /* 自訂義百分比屬性 */
  @property --p1 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 100%;
  }
  /* 自訂義百分比屬性 */
  @property --p2 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 100%;
  }
  p {
    margin: 30px;
    width: 320px;
    font-size: 24px;
    color: #0000;           /* 文字顏色設定為透明 */  
    background: linear-gradient(to top, #fff var(--p1), #000 var(--p2), #000 100%); /* 套用百分比自訂屬性 */
    background-clip: text;
    animation: b 2s linear infinite alternate;   /* 動畫 */
  }       
  /* 動畫改變自訂屬性數值 */
  @keyframes b {
    0%{
      --p1: 100%;
      --p2: 100%;
    }
    50%{
      --p1: 0%;
      --p2: 50%;
    }
    100%{
      --p1: 0%;
      --p2: 0%;
    }
  }
</style>

小结

background-clip 是一个比较新的样式属性，只要运用这篇教学的做法，就能轻松做出各种非常有特色的文字啰。

意见反馈