空心文字、文字水波背景

这篇教学会使用 CSS 的 paint-order 样式属性产生空心文字，并搭配 clip-path 和 background-clip 样式属性，产生水波的背景动画，做出有趣的文字效果

快速导览：

• 使用 paint-order 制作外框文字
• 使用 clip-path 制作水波背景
• 使用 SVG 与 background-clip 制作水波背景

使用 paint-order 制作外框文字

CSS 的 paint-order 是专门制作“外框文字”的样式属性，使用时需要搭配 -webkit-text-stroke 设定外框的颜色和粗细，下方范例会将文字颜色设为透明，产生三组不同粗细外框的外框文字。

参考：paint-order 文字外框

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

<!-- HTML 程式碼 -->
<h1>APPLE</h1>
<h1>BANANA</h1>
<h1>OXXO</h1>

<!-- CSS 程式碼 -->
<style>
  h1 {
    color: #0000;  /* 顏色設為透明 */
    margin: 0;
    font-size: 80px;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    paint-order: stroke;
  }
  h1:nth-child(1) {-webkit-text-stroke: 2px red;}
  h1:nth-child(2) {-webkit-text-stroke: 3px orange;}
  h1:nth-child(3) {-webkit-text-stroke: 5px cyan;}
</style>

使用 clip-path 制作水波背景

能够制作外框字之后，只需要将外框字覆盖在实心文字上方，并使用 clip-path 将实心文字裁切出水波的造型，就能产生水波背景文字，此处使用 polygon() 搭配“百分比”单位才能再裁切后自动适应文字宽度，不能使用 path() 路径进行裁切，最后搭配 CSS 动画就能做出水波的效果，可打开“CSS clip path maker”网站自行标记出水波的座标点。

参考：CSS 裁切路径 clip-path

下方范例会展示三组不同颜色，但相同水波动画的效果 ( 注意，水波动态的节点数量必须相同 )。

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

<!-- HTML 程式碼 -->
<h1 text="APPLE">APPLE</h1>
<h1 text="BANANA">BANANA</h1>
<h1 text="OXXO">OXXO</h1>

<!-- CSS 程式碼 -->
<style>
  h1 {
    position: relative;
    margin: 0;
    font-size: 100px;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    width: max-content;
  }
  h1:nth-child(1){color: #fa0;}                            /* 底色 */
  h1:nth-child(1)::before{-webkit-text-stroke: 3px red;}   /* 外框色 */
  h1:nth-child(1)::after{color: #fff;}                     /* 水波色 */
  h1:nth-child(2){color: #fff;}                            /* 底色 */
  h1:nth-child(2)::before{-webkit-text-stroke: 3px #006;}  /* 外框色 */
  h1:nth-child(2)::after{color: #06c;}                     /* 水波色 */
  h1:nth-child(3){color: #0a0;}                            /* 底色 */
  h1:nth-child(3)::before{-webkit-text-stroke: 3px #060;}  /* 外框色 */
  h1:nth-child(3)::after{color: #6f6;}                     /* 水波色 */

  h1::before, h1::after {
    position: absolute;  /* 絕對定位讓兩者可以重疊 */
    top: 0;
    left: 0;
    content: attr(text); /* 讀取元素屬性 */
  }
  h1::before {
    z-index: 2;
    color: #0000;
    paint-order: stroke; /* 外框文字 */
  }
  h1::after {
    z-index: 1;
    animation: oxxo 1s infinite alternate linear; /* 套用動畫 */
  }
  /* 注意節點數量都要一致 */
  @keyframes oxxo {
    0% {clip-path: polygon(0% 70%, 
      6% 60%, 
      15% 62%, 
      22% 68%, 
      30% 73%, 
      42% 71%, 
      51% 66%, 
      59% 59%, 
      66% 56%, 
      74% 57%, 
      83% 62%, 
      90% 69%, 
      96% 72%, 
      100% 65%, 
      100% 100%, 
      0% 100%);
    }
    100% {clip-path: polygon(0% 70%, 
      7% 76%, 
      13% 80%, 
      20% 81%, 
      25% 76%, 
      33% 70%, 
      43% 65%, 
      51% 65%, 
      57% 70%, 
      64% 76%, 
      73% 81%, 
      84% 78%, 
      91% 73%, 
      100% 65%, 
      100% 100%, 
      0% 100%);
    }
  }
</style>

使用 SVG 与 background-clip 制作水波背景

使用 clip-path:polygon() 的方式会产生“直线边缘”的水波，效果仍然没有办法实现“平滑”的水波边缘，如果要实现平滑边缘，就必须使用 SVG 的水波动画作为背景，搭配 background-clip 裁切出文字的样式，下方是 SVG 动画的程序码。

参考：background-clip 裁切背景、SVG 范例文件下载

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 667 124" style="enable-background:new 0 0 667 124;" xml:space="preserve">
<path fill="red">
  <animate 
attributeName="d" 
dur="2s" 
repeatCount="indefinite" 
restart="always" 
values="M0,43v81h667V43c0,0-44.9-43-131.5-43C438.5,0,411,76,325,77S208.5,20,110.5,20C46.5,20,0,43,0,43z; 
M0,43v81h667V43c0,0-44.9,35.5-131.5,35.5c-97,0-124.5-79-210.5-78s-116.5,89-214.5,89C46.5,89.5,0,43,0,43z; 
M0,43v81h667V43c0,0-44.9-43-131.5-43C438.5,0,411,76,325,77S208.5,20,110.5,20C46.5,20,0,43,0,43z"
/>
</path>
</svg>

下方范例会将背景图设定为 SVG 动画，搭配外框文字和背景位置，就能呈现漂亮的水波动画背景，但如果要修改水波颜色就必须修改 SVG 文件。

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

<!-- HTML 程式碼 -->
<h1 text="APPLE">APPLE</h1>
<h1 text="BANANA">BANANA</h1>
<h1 text="OXXO">OXXO</h1>

<!-- CSS 程式碼 -->
<style>
  h1 {
    position: relative;
    margin: 0 20px;
    font-size: 100px;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    width: max-content;
  }
  h1:nth-child(1){color: #fa0;}                           /* 底色 */
  h1:nth-child(1)::before{-webkit-text-stroke: 3px red;}  /* 外框 */
  h1:nth-child(1)::after{background-position: 0 60px;}    /* 背景位置 */
  h1:nth-child(2){color: #fff;}                           /* 底色 */
  h1:nth-child(2)::before{-webkit-text-stroke: 3px #006;} /* 外框 */
  h1:nth-child(2)::after{background-position: 0 60px;}    /* 背景位置 */
  h1:nth-child(3){color: #0a0;}                           /* 底色 */
  h1:nth-child(3)::before{-webkit-text-stroke: 3px #060;} /* 外框 */
  h1:nth-child(3)::after{background-position: 0 63px;}    /* 背景位置 */

  h1::before, h1::after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(text);
  }
  h1::before {
    z-index: 2;
    color: #0000;
    paint-order: stroke;
  }
  h1::after {
    color: #0000;
    z-index: 1;
    background-image: url('https://steam.oxxostudio.tw/download/css/wave-bg.svg'); /* 背景為 SVG */
    background-repeat: no-repeat;
    background-clip: text;
  }
</style>

小结

虽然这个文字效果很有趣，但因为 -webkit-text-stroke 样式属性只支援 -webkit- 浏览器，在部分浏览器就无法看到这种文字空心效果，不过如果只是要单纯展示一些有趣的效果，倒是可以试试看这篇教学的做法。

意见反馈