強大的CSS：文字下波浪線動畫效果

之前有至少5個人在評論中詢問我文章中連結hover時候波浪下劃線動畫是怎麼實現的，類似下圖gif示意：

這裡就介紹下是如何實現的。

有兩種實現方法，各有優劣。

一、使用徑向漸變純CSS實現

就是使用徑向漸變繪製我們的波浪線效果，一個波浪線迴圈段是有一個朝上的半個圓弧和一個朝下的半個圓弧組合而成的。

所以，我們只要使用徑向漸變繪製圓弧，再透過 background-position 控制兩個圓弧的位置，讓其前後拼接在一起就可以實現波浪線效果。

相關CSS程式碼如下：

.flow-wave {
    background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
    background-size: 20px 20px;
    background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
}

實時效果如下：

有了靜態的波浪線效果，剩下的就像這個波浪線動起來，用CSS3  animation 動畫控制 background-position 位置即可。

.flow-wave {
    animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
    from { background-position-x: -10px, 0; }
    to { background-position-x: -30px, -20px; }
}

於是波浪線動畫效果就實現了。

這種方法實現的優點是顏色控制非常方便，例如，我們修改文字顏色為原諒綠，彎彎水波的顏色也變成了原諒綠：

此方法實現的不足就是：理解成本有點高，如何使用CSS  radial-gradient 模擬波浪線效果是需要相當的CSS功力積累的，上手不太容易，以後要修改個尺寸什麼的也不太好維護。同時，在普通螢幕密度螢幕下的Chrome瀏覽器上，線條並不平滑，吹毛求疵的設計師不一定會接受。

此時，可以試試下面這種更利於理解的方法。

二、使用SVG波形向量圖作為背景

就是我們直接使用一個使用SVG波形向量圖作為背景，不用自己去手動CSS繪製，程式碼量差不多，還更容易理解。CSS程式碼示意：

.svg-wave {
    background: url("data:image/svg+xml,%3Csvg xmlns='%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%; 
    background-size: 20px auto;
}

實時效果如下：

有了靜態的波浪線效果，剩下的就像這個波浪線動起來，用CSS3  animation 動畫控制 background-position 位置即可。

.svg-wave {
    animation: waveMove 1s infinite linear;
}
@keyframes waveMove {
    from { background-position: 0 100%; }
    to   { background-position: -20px 100%; }
}

此方法就是我部落格連結使用的方法。

優點是線條邊緣平滑，效果細膩，易理解，易上手，易維護。

缺點也很明顯，就是波浪線的顏色無法實時跟著文字的顏色發生變化，適用於文字顏色不會多變的場景。

如果我們想要改變波浪線的顏色也很簡單，修改 background 程式碼中的 stroke='%23333' 這部分， '%23' 就是就是 # ，因此， stroke='%23333' 其實就是 stroke='#333' 的意思。例如，我們需要改成紅色略帶橙色，可以 stroke='%23F30' ，也可以寫完整 stroke='%23FF3300' 。

這個顏色就是我部落格連結波浪線的顏色，如下圖：

大家可以根據自己實際開發的場景選擇合適的方法。

三、每當要結束的時候

text-decoration 屬性早已支援波浪線下劃線：

text-decoration-style: wavy;

效果如下截圖：

可以看到，線好粗好不協調，而且字元和裝飾線發生重疊的時候，裝飾線直接消失了，結果波浪線變成了一截一截的，還需要使用 text-decoration-skip 進行額外控制。因此，實際開發，不建議在實際專案中使用。

而且你無法預知每個波浪線重複片段的寬度，想要無限運動理論上就不太可行。

因此，文字或者圖形的波浪線動畫效果不能使用 text-decoration 的波浪線。

自己是一個五年的前端工程師,希望本文對你有幫助！

這裡推薦一下我的前端學習交流扣qun：731771211 ，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術