要实现竖向文字波浪效果，必须结合 writing-mode 与 css 动画，因为 writing-mode 仅改变文本排列方向，无法产生动态波浪。1. 使用 writing-mode: vertical-rl 将文字设为垂直排列；2. 将每个字符用 span 包裹以实现独立控制；3. 为每个 span 应用 transform: translatey 的 animation 动画；4. 通过 animation-delay 为每个字符设置递增延迟，形成错位波浪感；5. 优化性能时应使用 transform 和 will-change: transform 提升渲染效率；6. 考虑兼容性，在老旧浏览器中测试或降级处理；7. 应用场景限于短文本如标题、logo 或装饰性内容，避免影响可读性；8. 控制动画幅度与速度，确保视觉舒适；9. 支持 prefers-reduced-motion 以提升可访问性；10. 注意维护成本，动态内容需用 javascript 自动拆分字符。该效果本质是布局与动效的结合，writing-mode 负责“站队”，animation 负责“跳舞”，二者缺一不可，最终实现竖向波浪文字的完整效果。
在CSS中实现文字竖向波浪效果，核心在于结合
writing-mode属性让文字垂直排列，然后利用CSS动画（
animation）对每个字符进行独立的、错位的
transform: translateY移动。这种组合能够创造出视觉上的“波浪”律动感。
解决方案
要实现竖向文字波浪，你需要将每个字符独立包裹起来，通常是使用
<span>标签。然后，通过CSS的
writing-mode属性改变文本流方向，并为每个
<span>元素应用一个带有
transform: translateY的动画，同时利用
animation-delay制造出波浪的错位效果。
<div class="wavy-text-container">
<span>文</span><span>字</span><span>波</span><span>浪</span><span>效</span><span>果</span><span>很</span><span>酷</span><span>吧</span><span>！</span>
</div>
<style>
/* 容器样式：设置文字方向和基本布局 */
.wavy-text-container {
display: flex; /* 让子元素能更好地垂直排列 */
writing-mode: vertical-rl; /* 文字从右向左垂直排列 */
font-size: 3em; /* 字体大小，让效果更明显 */
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; /* 字体选择 */
color: #4CAF50; /* 文字颜色 */
height: 350px; /* 容器高度，确保文字有足够空间 */
align-items: flex-start; /* 文字从容器顶部开始排列 */
justify-content: center; /* 整体居中显示 */
overflow: hidden; /* 防止动画超出容器 */
margin: 50px auto;
border: 1px dashed #ddd; /* 增加边框方便观察 */
padding: 20px;
box-sizing: border-box;
line-height: 1.2; /* 调整行高，避免字符间距过大或过小 */
}
/* 单个字符的样式：应用动画 */
.wavy-text-container span {
display: inline-block; /* 确保transform能正常作用 */
animation: verticalWave 1.8s ease-in-out infinite alternate; /* 动画名称、时长、缓动函数、循环、交替 */
will-change: transform; /* 优化动画性能 */
}
/* 动画关键帧：定义波浪的上下移动 */
@keyframes verticalWave {
0%, 100% {
transform: translateY(0); /* 动画开始和结束时在基线位置 */
}
50% {
transform: translateY(-10px); /* 动画中间时向上移动10像素，形成波峰 */
}
}
/* 通过 nth-child 实现动画延迟，创造波浪效果 */
/* 这里的延迟值需要根据实际文字数量和动画时长进行调整 */
.wavy-text-container span:nth-child(1) { animation-delay: 0s; }
.wavy-text-container span:nth-child(2) { animation-delay: 0.1s; }
.wavy-text-container span:nth-child(3) { animation-delay: 0.2s; }
.wavy-text-container span:nth-child(4) { animation-delay: 0.3s; }
.wavy-text-container span:nth-child(5) { animation-delay: 0.4s; }
.wavy-text-container span:nth-child(6) { animation-delay: 0.5s; }
.wavy-text-container span:nth-child(7) { animation-delay: 0.6s; }
.wavy-text-container span:nth-child(8) { animation-delay: 0.7s; }
.wavy-text-container span:nth-child(9) { animation-delay: 0.8s; }
.wavy-text-container span:nth-child(10) { animation-delay: 0.9s; }
.wavy-text-container span:nth-child(11) { animation-delay: 1.0s; }
.wavy-text-container span:nth-child(12) { animation-delay: 1.1s; }
/* ...根据文字长度继续添加 nth-child */
</style>为什么直接使用 writing-mode
无法实现文字波浪效果？
这是一个很常见的误解，我发现不少初学者会以为
writing-mode就能搞定一切。但其实，
writing-mode的作用非常专一，它仅仅是改变了文本的“书写方向”或者说“流向”。你可以把它想象成给文字换了个跑道，比如从横着跑变成竖着跑，或者从左往右跑变成从右往左跑。它处理的是文字块的布局和排列，比如段落的堆叠方向、行内元素的排列顺序等等。
立即学习“前端免费学习笔记（深入）”；
但“波浪”效果，那完全是另一回事了。波浪意味着每个独立的文字字符需要有自己的、动态的、周期性的位移变化，而且这些变化还需要彼此之间有一个时间差，才能形成那种此起彼伏的连贯感。
writing-mode对字符本身的“动起来”这件事是无能为力的。它只管“站队”，不管“跳舞”。所以，我们必须引入
animation和
transform这些真正的“动效”属性来让文字“跳”起来，而
animation-delay则是那个让它们“跳”得有节奏、有波浪感的关键指挥棒。
如何优化竖向文字波浪动画的性能与兼容性？
在实际项目中，特别是当页面上有很多动画或者目标设备性能有限时，动画的性能优化就显得尤为重要。对于这种文字波浪效果，我通常会从几个方面去考虑：
首先，优先使用 transform
进行动画。这是因为
transform属性的动画通常由GPU（图形处理器）进行加速，相比于直接改变
top,
left,
margin等会触发浏览器重新布局（reflow）和重绘（repaint）的属性，
transform动画效率更高，卡顿感会大大降低。你会发现，使用
translateY带来的流畅度是肉眼可见的。
其次，可以尝试添加
will-change: transform;。这个CSS属性是给浏览器一个“提示”，告诉它这个元素未来可能会发生
transform变化，让浏览器可以提前进行一些优化，比如为该元素创建一个独立的渲染层。但要注意，不要滥用
will-change，因为它也可能消耗额外的内存，只在确实需要优化的动画元素上使用。
关于兼容性，
writing-mode和
transform以及
animation在现代浏览器中的支持度已经非常好了。但在一些老旧的浏览器（比如IE11或更早）上，
writing-mode可能需要添加
-ms-前缀，或者部分CSS3动画特性支持不完善。我的建议是，如果你的项目需要兼容这些老浏览器，最好进行充分的测试，或者考虑提供一个降级方案（比如直接显示静态的竖向文本）。对于大多数现代Web项目来说，这些都不是大问题。此外，还可以考虑使用
prefers-reduced-motion媒体查询，为那些对动画敏感的用户提供一个无动画的版本，这是一种很好的用户体验考量。
这种竖向文字波浪效果在实际项目中有什么应用场景和设计考量？
竖向文字波浪效果，虽然看起来有点“花哨”，但在特定的设计场景下，它确实能带来意想不到的视觉冲击力。
从应用场景来看，我个人觉得它非常适合作为：
- 创意标题或Logo元素： 比如在一些艺术性较强的网站、个人作品集或者品牌宣传页上，用它来展示简短的、富有情感的标题，能瞬间抓住用户的眼球。
- 加载动画的辅助： 有时候，一个简单的加载指示器会显得枯燥，如果能将“加载中...”这几个字做成这种波浪效果，既能告知用户状态，又增加了趣味性。当然，这种情况下波浪幅度要小，速度要适中，不能喧宾夺主。
- 装饰性文字块： 在一些非主要阅读区域，例如侧边栏、页脚或者某个模块的背景文字，用这种方式处理，可以增加页面的设计感和层次感，让静态内容也“活”起来。
但在设计考量上，我们必须非常谨慎：
- 可读性优先： 这是最重要的一点。波浪动画会使文字跳动，如果应用于大段文本或重要信息，会严重影响阅读体验，甚至让用户感到眩晕。所以，它更适合短小精悍的、装饰性大于信息性的文字。
- 动画幅度与速度： 波浪的上下移动幅度不宜过大，动画速度也不宜过快。幅度过大容易显得“癫狂”，速度过快则会让人眼花缭乱。一个微妙、缓慢的波浪效果往往比激烈的跳动更具美感和高级感。
- 性能影响： 尽管我们做了优化，但大量字符的独立动画依然会消耗一定的计算资源。如果页面上存在大量这种效果，或者用户设备性能较低，可能会导致页面卡顿。因此，在使用前务必进行性能测试。
-
辅助功能（Accessibility）： 如前所述，对有前庭障碍或运动敏感的用户来说，动画可能引起不适。提供
prefers-reduced-motion
的支持，或者提供一个禁用动画的选项，是体现网站人性化设计的重要一环。 -
维护复杂性： 这种效果通常需要将文字拆分成单个字符，这在HTML结构上会增加一些复杂度。如果文字是动态生成的，可能需要JavaScript来辅助处理字符串分割和
<span>
标签的包裹。这无疑会增加开发和维护的成本。
总而言之，竖向文字波浪是一个很酷的视觉技巧，但它更像一道“配菜”，而非“主食”。用得巧，能为页面增色；用得滥，则可能适得其反。
