超链接底线动画效果

通常在设计网页的超链接时，不外乎都是使用文字颜色或背景色，进而搭配 transition 制作简单的转场，但如果熟练运用 CSS，就能做出更与众不同的效果，这篇教学会使用 CSS 制作多种底线效果，除了有基本的变色和转场，也会使用渐层色、动画、SVG 制作别具特色的超链接底线动画效果。

快速导览：

• 常见的超链接效果
• 使用渐层色，制作超链接底线效果
• 使用 SVG，制作超链接底线动画

常见的超链接效果

下方列出几种常见的超链接底线效果，分别是变色、转场 transition、改变底线样式与使用边框效果，其中比较需要注意的是使用边框作为底线，由于显示类型为 inline 的元素无法控制高度，就无法控制底部边框的位置，所以需要改为 inline-block 显示类型，才能精准控制边框位置。

参考：:hover、CSS 转场 transition、text-decoration 文字装饰、border-* 单一边框

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

<!-- HTML 程式碼 -->
<a href="#">STEAM 教育學習網</a> ( 預設 )
<br>
<a href="#" class="link-1">STEAM 教育學習網</a> ( hover )
<br>
<a href="#" class="link-2">STEAM 教育學習網</a> ( hover + transition: 0.5s )
<br>
<a href="#" class="link-3">STEAM 教育學習網</a> ( hover + 底線波浪狀 )
<br>
<a href="#" class="link-4">STEAM 教育學習網</a> ( hover + 邊框偽裝底線 )
<br>

<!-- CSS 程式碼 -->
<style>
  body {line-height: 2;}
  a[class] {color: blue;}       /* 有 class 的超連結文字為藍色 */
  a[class]:hover {color: red;}  /* 有 class 的超連結 hover 時文字為紅色 */

  .link-2 {transition: .5s;}    /* 轉場持續 0.5 秒 */

  .link-3:hover {text-decoration-style: wavy;}  /* 底線為波浪狀 */

  .link-4 {
    display:inline-block;           /* 改成 inline-block 顯示類型，才能控制底線位置 */
    text-decoration: none;          /* 隱藏底線 */
    line-height: 1;                 /* 調整行高，讓底部邊框靠近文字 */
    border-bottom: 2px solid blue;  /* 底部邊框樣式 */
  }
  .link-4:hover {border-bottom: 2px dotted red;} /* hover 時改變邊框顏色 */
</style>

使用渐层色，制作超链接底线效果

除了常见的超链接底线效果，也可以使用“渐层色”代替底线，不过因为渐层色“不支援转场和动画”，需要搭配 CSS 自订属性“@property”才能实现渐层色的动画效果，下方范例打开后，会使用渐层色的“转场”和“动画”产生有趣的底线效果。

参考：CSS 渐层色、CSS 渐层色的转场与动画、CSS @property 自订属性值、CSS 动画 animation

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

<!-- HTML 程式碼 -->
<a href="#" class="link-5">STEAM 教育學習網</a> ( hover + 漸層色偽裝底線 + 轉場 )</body>
<br>
<a href="#" class="link-6">STEAM 教育學習網</a> ( hover + 漸層色背景動畫 )</body>

<!-- CSS 程式碼 -->
<style>
  body {line-height: 2;}
  a[class] {color: blue;}        /* 有 class 的超連結文字為藍色 */
  a[class]:hover {color: red;}  /* 有 class 的超連結 hover 時文字為紅色 */

  /* 建立自訂屬性 --c，類型為顏色 */
  @property --c {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }
  /* 建立自訂屬性 --y，類型為長度 */
  @property --y {
    syntax: "<length>";
    inherits: true;
    initial-value: 2px;
  }

  .link-5 {
    line-height: 1.3;
    display:inline-block;                   /* 改成 inline-block 顯示類型，才能控制尺寸 */
    text-decoration: none;                  /* 隱藏底線 */
    transition: all .5s, --c .5s, --y .5s;  /* 將自訂屬性套用轉場效果 */
    /* 背景漸層色中使用自訂屬性 */
    background: linear-gradient(0deg, 
      var(--c) 0, 
      var(--c) 2px, 
      #0000 var(--y), 
      #0000 100%);
  }
  /* hover 時改變自訂屬性 */
  .link-5:hover {
    --c: red;
    --y: 15px;
  }

  /* 建立自訂屬性 --dx，類型為長度 */
  @property --dx {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }
  .link-6 {
    line-height: 1.3;
    display: inline-block;   /* 改成 inline-block 顯示類型，才能控制尺寸 */
  }
  .link-6:hover {
    text-decoration: none;   /* 隱藏底線 */
    /* 漸層色中使用自訂屬性 */
    background: repeating-linear-gradient(
        to right,
        pink calc(var(--dx)),  pink calc(10px + var(--dx)),
        #0000 calc(10px + var(--dx)), #0000 calc(20px + var(--dx)));
    /* 執行動畫 */
    animation: oxxo 1s linear infinite;
  }
  /* 動畫中改變自訂屬性 */
  @keyframes oxxo {
    0% {--dx: 0;}
    100% {--dx: 20px;}
  }
</style>

使用 SVG，制作超链接底线动画

如果熟悉 SVG，就能运用 SVG 作为背景图，这种做法就不会受限于显示类型或自订属性，只需要简单的程序码就能产生非常有特色的底线动画，下方范例会用两组 SVG 做出不同的超链接底线动画效果。

参考：背景图片 ( 定位、定位点、尺寸 )、CSS 动画 animation

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

<!-- HTML 程式碼 -->
<a href="#" class="link-7">STEAM 教育學習網</a> ( hover + SVG 波浪背景圖 + 動畫 )</body>
<br>
<a href="#" class="link-8">STEAM 教育學習網</a> ( hover + SVG 虛線背景圖 + 動畫 )</body>

<!-- CSS 程式碼 -->
<style>
  body {line-height: 2;}
  a[class] {color: blue;}        /* 有 class 的超連結文字為藍色 */
  a[class]:hover {color: red;}  /* 有 class 的超連結 hover 時文字為紅色 */

  .link-7:hover {
    text-decoration: none;
    /* 使用 SVG 圖片作為背景圖 */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 5"><path fill="none" stroke-width="1.5" stroke="%23f00" d="M0,0.5c4.1,0,4.1,4,8.2,4s4.1-4,8.2-4"/></svg>');
    background-repeat: repeat-x;   /* x 方向重複 */
    background-position: 0 100%;   /* 位置放在下方 */
    background-size: 16px auto;    /* 尺寸寬度數值與 viewBox 相同 */
    animation: oxxo1 1s linear infinite;   /* 執行動畫 */
  }
  @keyframes oxxo1 {
    0% {background-position: 0 100%;}
    100% {background-position: 16px 100%;}
  }

  .link-8:hover {
    text-decoration: none;
    /* 使用 SVG 圖片作為背景圖 */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"><path fill="none" stroke-width="1.5" stroke="%23f00" d="M0,3h5"/></svg>');
    background-repeat: repeat-x;   /* x 方向重複 */
    background-position: 0 100%;   /* 位置放在下方 */
    background-size: 10px auto;    /* 尺寸寬度數值與 viewBox 相同 */
    animation: oxxo2 1s linear infinite;   /* 執行動畫 */
  }
  @keyframes oxxo2 {
    0% {background-position: 0 100%;}
    100% {background-position: 10px 100%;}
  }
</style>

小结

虽然对于大部分的网页来说，超链接的效果并不是重点，但如果可以运用一点点的程序码，就能替网页加入一些小小的惊喜，也是满有意思的。

意见反馈