CSS實現文字下波浪線動畫效果

這篇文章主要介紹“CSS實現文字下波浪線動畫效果”，在日常操作中，相信很多人在CSS實現文字下波浪線動畫效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS實現文字下波浪線動畫效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、使用徑向漸變純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='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%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的波浪線。

到此，關于“CSS實現文字下波浪線動畫效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！