# 怎么用HTML/CSS制作動態波浪形文本行
*圖：動態波浪文字效果示意*
## 引言
在現代網頁設計中，動態文字效果能顯著提升用戶體驗和視覺吸引力。波浪形文本行（Wavy Text）是一種流行的設計趨勢，常見于創意作品集、營銷著陸頁和互動式UI中。本文將深入講解如何使用純HTML/CSS（無需JavaScript）實現這種效果，涵蓋基礎實現、高級動畫控制以及跨瀏覽器兼容方案。
---
## 一、基礎實現原理
### 1.1 核心CSS技術
波浪效果的本質是通過`transform: translateY()`配合CSS動畫實現的垂直位移波動：
```css
@keyframes wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
<!DOCTYPE html>
<html>
<head>
<style>
.wavy-text {
font-size: 3rem;
font-weight: bold;
display: inline-block;
}
.wavy-text span {
display: inline-block;
animation: wave 2s ease-in-out infinite;
}
@keyframes wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
</style>
</head>
<body>
<div class="wavy-text">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
</div>
</body>
</html>
<span>中display: inline-block保證變形不影響布局animation-delay的階梯式設置創造波浪序列（后續章節詳解）通過為每個字符設置遞增的animation-delay實現波浪傳播效果：
.wavy-text span:nth-child(1) { animation-delay: 0.1s; }
.wavy-text span:nth-child(2) { animation-delay: 0.2s; }
/* 后續字符依次遞增 */
避免重復編寫:nth-child規則：
.wavy-text span {
--delay: calc(var(--i) * 0.1s);
animation: wave 1.8s var(--delay) infinite;
}
HTML需配合添加樣式變量：
<span style="--i:1">H</span>
<span style="--i:2">e</span>
...
使用cubic-bezier()函數創造更自然的波浪運動：
@keyframes wave {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-15px); }
75% { transform: translateY(5px); }
}
配合文字顏色變化增強視覺效果：
@keyframes color-wave {
0%, 100% { color: #3498db; }
50% { color: #e74c3c; }
}
添加rotateX創造立體感：
@keyframes wave-3d {
50% {
transform: translateY(-15px) rotateX(20deg);
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
}
創建液體金屬效果：
<svg width="0" height="0">
<filter id="wavy-filter">
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" />
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>
<style>
.wavy-text {
filter: url(#wavy-filter);
}
</style>
強制GPU渲染提升性能：
.wavy-text span {
transform: translateZ(0);
will-change: transform;
}
對長文本使用精簡動畫：
/* 每三個字符應用動畫 */
.wavy-text span:nth-child(3n) { animation: none; }
移動端簡化效果：
@media (max-width: 768px) {
.wavy-text span {
animation-duration: 2.5s;
animation-delay: calc(var(--i) * 0.15s);
}
}
.nav-link:hover span {
display: inline-block;
animation: wave 0.8s calc(var(--i)*0.05s);
}
@keyframes ripple {
to {
transform: translateY(0) scale(1.2);
opacity: 0;
}
}
結合視差滾動實現：
.hero-title span {
animation:
wave 3s var(--delay) infinite,
fade-in 1s backwards;
}
.wavy-text span {
-webkit-animation: wave 2s ease-in-out infinite;
animation: wave 2s ease-in-out infinite;
}
/* 基礎樣式 */
.wavy-text { letter-spacing: 2px; }
@supports (animation: wave) {
/* 支持動畫時的增強樣式 */
}
if (!CSS.supports('animation', 'wave')) {
document.querySelector('.wavy-text').classList.add('no-animation');
}
通過本文介紹的HTML/CSS技術，您可以創建從簡單到復雜的各種波浪文本效果。關鍵要點包括：
1. 合理使用animation-delay創造波浪序列
2. 結合貝塞爾曲線優化運動軌跡
3. 注意性能優化和移動端適配
建議在CodePen等平臺實踐這些技術，嘗試調整參數創造獨特效果。隨著CSS Houdini等新技術的發展，未來實現這類效果將更加高效靈活。
延伸閱讀：
- CSS Wave Generator工具
- MDN動畫性能指南 “`
注：實際運行時請根據需要調整動畫參數，完整示例建議查看配套CodePen演示。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
