純 CSS 超連結底線動畫效果
通常在設計網頁的超連結時，不外乎都是使用文字顏色或背景色，進而搭配 transition 製作簡單的轉場，但如果熟練運用 CSS，就能做出更與眾不同的效果，這篇教學會使用 CSS 製作多種底線效果，除了有基本的變色和轉場，也會使用漸層色、動畫、SVG 製作別具特色的超連結底線動畫效果。
快速導覽：
常見的超連結效果
下方列出幾種常見的超連結底線效果，分別是變色、轉場 transition、改變底線樣式與使用邊框效果，其中比較需要注意的是使用邊框作為底線，由於顯示類型為 inline 的元素無法控制高度，就無法控制底部邊框的位置，所以需要改為 inline-block 顯示類型，才能精準控制邊框位置。
參考：:hover、CSS 轉場 transition、text-decoration 文字裝飾、border-* 單一邊框
<!-- 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
<!-- 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 做出不同的超連結底線動畫效果。
<!-- 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>
小結
雖然對於大部分的網頁來說，超連結的效果並不是重點，但如果可以運用一點點的程式碼，就能替網頁加入一些小小的驚喜，也是滿有意思的。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～