.jpg)
實(shí)現(xiàn)文字波浪動(dòng)畫的核心是將每個(gè)字母包裹在單獨(dú)的 span 中，并通過 css 動(dòng)畫實(shí)現(xiàn)錯(cuò)落有致的上下運(yùn)動(dòng)。首先，用 html 將每個(gè)字母分別包裹在 span 標(biāo)簽內(nèi)；其次，使用 css 為每個(gè) span 應(yīng)用動(dòng)畫，使其在垂直方向移動(dòng)；接著，通過 animation-delay 設(shè)置不同的起始時(shí)間，形成波浪效果；若使用 JavaScript，可通過遍歷 span 元素并設(shè)置 css 變量 –i 來動(dòng)態(tài)控制延遲；若僅用 css，則可借助 :nth-child() 手動(dòng)設(shè)定每個(gè)字母的延遲時(shí)間；此外，為使動(dòng)畫更自然，可添加旋轉(zhuǎn)、縮放、透明度變化等效果，并調(diào)整緩動(dòng)函數(shù)；最后，針對(duì)不同字體和字號(hào)，需適當(dāng)調(diào)整 translatey 和 animation-delay 的值，以及 vertical-align 屬性以修正基線位置，確保動(dòng)畫流暢協(xié)調(diào)。
實(shí)現(xiàn)文字波浪動(dòng)畫，核心在于利用CSS動(dòng)畫和一些巧妙的HTML結(jié)構(gòu)。簡(jiǎn)單來說，就是把每個(gè)字母都單獨(dú)包裹起來，然后讓它們分別做上下運(yùn)動(dòng)，營造出波浪的效果。
解決方案：
首先，你需要將文本拆分成單獨(dú)的字母，并用 span 標(biāo)簽包裹每個(gè)字母。然后，通過 CSS 為每個(gè) span 元素應(yīng)用動(dòng)畫，讓它們?cè)诖怪狈较蛏线M(jìn)行周期性的移動(dòng)。關(guān)鍵在于，每個(gè)字母的動(dòng)畫起始時(shí)間應(yīng)該略有不同，這樣才能產(chǎn)生波浪的錯(cuò)落感。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
<div class="wavy"> <span>H</span> <span>e</span> <span>l</span> <span>l</span> <span>o</span> <span>!</span> </div>
.wavy { position: relative; } .wavy span { position: relative; display: inline-block; animation: wave 1s infinite; animation-delay: calc(0.1s * var(--i)); /*關(guān)鍵：延遲時(shí)間不同*/ } @keyframes wave { 0%, 40%, 100% { transform: translateY(0) } 20% { transform: translateY(-20px) } }
重要的一點(diǎn)是，你需要通過某種方式將每個(gè) span 元素的索引傳遞給 CSS。這里我使用了 CSS 變量 –i，并在 HTML 中動(dòng)態(tài)設(shè)置它。 如果你用JS生成這些span，那設(shè)置–i就很容易了。
如何動(dòng)態(tài)設(shè)置CSS變量–i?
如果你使用 JavaScript，你可以輕松地遍歷每個(gè) span 元素，并設(shè)置其 –i 變量。例如：
const wavy = document.querySelector('.wavy'); const spans = wavy.querySelectorAll('span'); spans.forEach((span, index) => { span.style.setProperty('--i', index); });
這段代碼會(huì)找到所有 .wavy 內(nèi)部的 span 元素，然后為每個(gè)元素設(shè)置 –i 變量，值為它的索引。
如果不用JS呢？ 能不能純CSS實(shí)現(xiàn)？
純CSS實(shí)現(xiàn)稍微復(fù)雜一點(diǎn)，但也不是不可能。你可以利用 :nth-child() 選擇器，為每個(gè) span 元素設(shè)置不同的 animation-delay。但是，這種方法需要你預(yù)先知道文本的長(zhǎng)度，并且在 CSS 中為每個(gè)字母都寫一條規(guī)則。
.wavy span:nth-child(1) { animation-delay: 0s; } .wavy span:nth-child(2) { animation-delay: 0.1s; } .wavy span:nth-child(3) { animation-delay: 0.2s; } /* ... 更多規(guī)則 ... */
這種方法比較繁瑣，不推薦使用，除非你的文本是固定的，并且長(zhǎng)度很短。
如何讓波浪效果更自然？
僅僅讓字母上下移動(dòng)可能還不夠，你可以嘗試添加一些其他的效果，例如：
- 旋轉(zhuǎn)： 讓字母在上下移動(dòng)的同時(shí)，稍微旋轉(zhuǎn)一下，增加一些動(dòng)感。
- 縮放： 讓字母在上下移動(dòng)的同時(shí)，稍微縮放一下，增加一些層次感。
- 透明度： 讓字母在上下移動(dòng)的同時(shí)，改變透明度，增加一些朦朧感。
- 緩動(dòng)函數(shù)： 使用不同的緩動(dòng)函數(shù)，讓動(dòng)畫效果更自然。例如，ease-in-out 可以讓動(dòng)畫開始和結(jié)束時(shí)速度較慢，中間速度較快。
例如，你可以修改 @keyframes wave 規(guī)則，添加旋轉(zhuǎn)和縮放效果：
@keyframes wave { 0%, 40%, 100% { transform: translateY(0) rotate(0deg) scale(1); } 20% { transform: translateY(-20px) rotate(10deg) scale(1.1); } }
這段代碼會(huì)讓字母在向上移動(dòng)時(shí)，稍微旋轉(zhuǎn) 10 度，并放大 1.1 倍。
如何處理不同字體和字號(hào)的情況？
不同的字體和字號(hào)可能會(huì)影響波浪動(dòng)畫的效果。你需要根據(jù)實(shí)際情況調(diào)整動(dòng)畫的參數(shù)，例如 translateY 的值、animation-delay 的值等。
一般來說，字體越大，translateY 的值應(yīng)該越大，才能產(chǎn)生明顯的波浪效果。同時(shí)，animation-delay 的值也應(yīng)該適當(dāng)調(diào)整，以保證波浪的流暢性。
另外，不同的字體可能會(huì)有不同的基線位置，這也會(huì)影響波浪動(dòng)畫的效果。你可以嘗試調(diào)整 span 元素的 vertical-align 屬性，來修正基線位置。例如：
.wavy span { vertical-align: middle; /* 或者其他值，例如 top、bottom 等 */ }
總之，處理不同字體和字號(hào)的情況需要你進(jìn)行一些實(shí)驗(yàn)和調(diào)整，找到最佳的參數(shù)組合。
.png)
