CSS實現(xiàn)文字下波浪線動畫效果

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

一、使用徑向漸變純CSS實現(xiàn)

就是使用徑向漸變繪制我們的波浪線效果，一個波浪線循環(huán)段是有一個朝上的半個圓弧和一個朝下的半個圓弧組合而成的。

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

相關(guān)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);
}

實時效果如下：

有了靜態(tài)的波浪線效果，剩下的就像這個波浪線動起來，用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; }
}

于是波浪線動畫效果就實現(xiàn)了。

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

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

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

二、使用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;
}

實時效果如下：

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

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

此方法就是我博客鏈接使用的方法。

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

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

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

這個顏色就是我博客鏈接波浪線的顏色，如下圖：

大家可以根據(jù)自己實際開發(fā)的場景選擇合適的方法。

三、每當要結(jié)束的時候

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

text-decoration-style: wavy;

效果如下截圖：

可以看到，線好粗好不協(xié)調(diào)，而且字符和裝飾線發(fā)生重疊的時候，裝飾線直接消失了，結(jié)果波浪線變成了一截一截的，還需要使用text-decoration-skip進行額外控制。因此，實際開發(fā)，不建議在實際項目中使用。

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

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

到此，關(guān)于“CSS實現(xiàn)文字下波浪線動畫效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>