上一篇
使用CSS关键帧动画和transform属性创建波浪式跳动的文字效果，通过为每个字符设置不同动画延迟，实现波浪起伏的动态视觉效果。
波浪式跳动文字效果实现指南
波浪式跳动的文字是一种吸引用户注意力的动态效果,常用于网站标题、宣传标语或重要提示，下面我将详细介绍如何通过HTML、CSS和JavaScript实现这种效果。
实现思路
波浪式跳动文字的核心原理是：
- 将文本拆分为单个字符
- 为每个字符创建独立动画
- 为每个字符设置不同的动画延迟
- 使用CSS关键帧动画实现跳动效果
完整代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">波浪式跳动文字效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.container {
max-width: 900px;
width: 100%;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
padding: 40px;
text-align: center;
}
h1 {
color: #2c3e50;
margin-bottom: 30px;
font-size: 2.8rem;
}
.wave-text {
display: inline-block;
font-size: 3.5rem;
font-weight: 800;
color: #e74c3c;
margin: 40px 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.wave-text span {
display: inline-block;
position: relative;
animation: wave 1.5s ease-in-out infinite;
}
@keyframes wave {
0%, 100% {
transform: translateY(0);
}
25% {
transform: translateY(-25px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-10px);
}
}
.content {
text-align: left;
margin: 40px 0;
line-height: 1.8;
color: #34495e;
}
.code-block {
background: #2c3e50;
color: #ecf0f1;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
font-family: 'Courier New', monospace;
text-align: left;
overflow-x: auto;
}
.example-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 40px 0;
}
.example {
width: 45%;
min-width: 300px;
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
margin: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.example h3 {
color: #3498db;
margin-bottom: 15px;
}
.custom-text {
margin: 30px 0;
display: flex;
flex-direction: column;
align-items: center;
}
#text-input {
width: 80%;
padding: 12px 20px;
border: 2px solid #3498db;
border-radius: 50px;
font-size: 1.1rem;
margin-bottom: 20px;
outline: none;
transition: all 0.3s;
}
#text-input:focus {
border-color: #e74c3c;
box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}
button {
background: #3498db;
color: white;
border: none;
padding: 12px 30px;
font-size: 1.1rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button:hover {
background: #2980b9;
transform: translateY(-3px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.note {
background: #fff3cd;
border-left: 5px solid #ffc107;
padding: 15px;
margin: 20px 0;
border-radius: 0 8px 8px 0;
}
@media (max-width: 768px) {
.wave-text {
font-size: 2.5rem;
}
.example {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>波浪式跳动文字效果实现指南</h1>
<div class="wave-text" id="waveText">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span> </span>
<span>W</span>
<span>o</span>
<span>r</span>
<span>l</span>
<span>d</span>
<span>!</span>
</div>
<div class="content">
<p>波浪式跳动文字是一种常见的网页动画效果，通过为每个字符设置不同的动画延迟，创造出类似波浪的运动效果，这种效果能有效吸引用户注意力，增强视觉体验。</p>
<h2>实现原理</h2>
<p>实现波浪式跳动文字需要三个关键步骤：</p>
<ol>
<li>将文本拆分为单个字符</li>
<li>为每个字符包裹独立的HTML元素（如span）</li>
<li>应用CSS动画并为每个字符设置不同的延迟时间</li>
</ol>
<div class="code-block">
<!-- HTML结构 --><br>
<div class="wave-text"><br>
<span>H</span><br>
<span>e</span><br>
<span>l</span><br>
<span>l</span><br>
<span>o</span><br>
</div><br><br>
/* CSS动画 */<br>
.wave-text span {<br>
display: inline-block;<br>
animation: wave 1.5s infinite;<br>
}<br><br>
/* 为每个字符设置不同的延迟 */<br>
.wave-text span:nth-child(1) { animation-delay: 0.1s; }<br>
.wave-text span:nth-child(2) { animation-delay: 0.2s; }<br>
.wave-text span:nth-child(3) { animation-delay: 0.3s; }<br>
.wave-text span:nth-child(4) { animation-delay: 0.4s; }<br>
.wave-text span:nth-child(5) { animation-delay: 0.5s; }<br><br>
/* 关键帧动画 */<br>
@keyframes wave {<br>
0%, 100% { transform: translateY(0); }<br>
50% { transform: translateY(-25px); }<br>
}
</div>
<div class="note">
<strong>注意：</strong> 在实际应用中，如果文字较长，手动为每个字符设置延迟会很繁琐，我们可以使用JavaScript自动完成这个过程。
</div>
<h2>动态实现方法</h2>
<p>对于动态内容或长文本，使用JavaScript自动拆分文本并设置延迟更高效：</p>
<div class="code-block">
function createWaveText(elementId, text) {<br>
const container = document.getElementById(elementId);<br>
container.innerHTML = ''; // 清空容器<br><br>
// 拆分文本为字符数组<br>
const characters = text.split('');<br><br>
// 为每个字符创建span元素<br>
characters.forEach((char, index) => {<br>
const span = document.createElement('span');<br>
span.textContent = char;<br>
span.style.animationDelay = `${index * 0.1}s`;<br>
container.appendChild(span);<br>
});<br>
}
</div>
<div class="example-container">
<div class="example">
<h3>应用场景1：网站标题</h3>
<div class="wave-text" id="titleExample">
<span>创</span>
<span>新</span>
<span>设</span>
<span>计</span>
<span>·</span>
<span>卓</span>
<span>越</span>
<span>体</span>
<span>验</span>
</div>
<p>波浪效果使标题更加生动，增强品牌印象。</p>
</div>
<div class="example">
<h3>应用场景2：行动号召</h3>
<div class="wave-text" id="ctaExample">
<span>立</span>
<span>即</span>
<span>注</span>
<span>册</span>
<span>!</span>
</div>
<p>动态效果能提高按钮或行动号召的点击率。</p>
</div>
</div>
<div class="custom-text">
<h3>自定义波浪文字效果</h3>
<input type="text" id="text-input" placeholder="输入您想要的文字..." value="尝试波浪效果">
<button onclick="updateWaveText()">应用效果</button>
</div>
</div>
</div>
<script>
// 初始波浪文字效果
document.querySelectorAll('.wave-text').forEach((container, containerIndex) => {
const text = container.textContent.trim();
container.innerHTML = '';
text.split('').forEach((char, charIndex) => {
const span = document.createElement('span');
span.textContent = char;
// 为不同容器设置不同延迟基数
const delayBase = containerIndex * 0.05;
span.style.animationDelay = `${(charIndex * 0.1) + delayBase}s`;
container.appendChild(span);
});
});
// 更新自定义波浪文字
function updateWaveText() {
const input = document.getElementById('text-input');
const text = input.value || '示例文字';
const container = document.createElement('div');
container.className = 'wave-text';
container.style.margin = '20px auto';
text.split('').forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.style.animationDelay = `${index * 0.1}s`;
container.appendChild(span);
});
// 移除旧的展示元素（如果存在）
const oldDemo = document.getElementById('custom-demo');
if (oldDemo) oldDemo.remove();
container.id = 'custom-demo';
input.parentNode.appendChild(container);
}
// 为示例添加动画延迟
document.querySelectorAll('.wave-text span').forEach((span, index) => {
span.style.animationDelay = `${index * 0.1}s`;
});
</script>
</body>
</html>
技术要点解析
HTML结构
将文本拆分为单个字符,每个字符包裹在<span>标签中：
<div class="wave-text"> <span>H</span> <span>e</span> <span>l</span> <span>l</span> <span>o</span> </div>
CSS动画
创建关键帧动画实现跳动效果：
@keyframes wave {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-25px); }
50% { transform: translateY(0); }
75% { transform: translateY(-10px); }
}
.wave-text span {
display: inline-block;
animation: wave 1.5s ease-in-out infinite;
}
动画延迟设置
为每个字符设置递增的延迟时间,形成波浪效果：
.wave-text span:nth-child(1) { animation-delay: 0.1s; }
.wave-text span:nth-child(2) { animation-delay: 0.2s; }
.wave-text span:nth-child(3) { animation-delay: 0.3s; }
/* ... */
JavaScript动态生成使用JavaScript自动处理：
function createWaveText(elementId, text) {
const container = document.getElementById(elementId);
container.innerHTML = '';
text.split('').forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.style.animationDelay = `${index * 0.1}s`;
container.appendChild(span);
});
}
最佳实践建议
- 适度使用：波浪效果适用于重点内容，但不宜过多使用
- 性能优化：避免在低性能设备上过度使用动画
- 可访问性：为动画提供暂停/停止选项
- 响应式设计：在不同屏幕尺寸调整动画幅度
- 浏览器兼容性：使用autoprefixer确保跨浏览器兼容
波浪式跳动文字效果能显著提升页面的视觉吸引力,但应确保它服务于内容而非分散注意力，通过合理应用，这种效果可以增强用户体验并提高关键信息的传达效率。
参考资料
- MDN Web文档 – CSS动画
- W3C CSS动画规范
- Web动画性能优化指南
- 可访问性最佳实践（WCAG 2.1）
实现方法已在现代浏览器（Chrome、Firefox、Safari、Edge）中测试通过。
