<p>要实现css文字竖向波浪效果，需将文字拆分为单个字符并分别应用动画。1. 使用javascript或手动将每个字符包裹在<span>中，并设置css变量--i表示索引；2. 容器使用writing-mode: vertical-lr实现竖向排列，并通过flex布局居中；3. 每个span应用animation和animation-delay，利用calc(var(--i) * 0.1s)实现错时动画；4. @keyframes中通过translatey和rotate定义上下波动与旋转，配合ease-in-out使动画更自然；5. 调整animation-duration控制整体速度，transform-origin设定旋转基点，overflow: hidden防止溢出。该方法通过分解文字为独立动画单元，使每个字符按序执行位移与旋转，形成连贯波浪动态，解决了整体transform无法实现逐字差异的问题。此技术可拓展至呼吸、抖动、逐字显现、弹跳、翻转等多种字符级动画效果，核心在于字符拆分与独立动画控制，结合writing-mode与transform实现丰富视觉表现。</p>
要实现CSS文字竖向波浪效果，核心在于结合
writing-mode将文字垂直排列，再通过
transform和
animation对每个字符进行精细的位移或旋转，并巧妙地利用
animation-delay制造出波浪般的连续动态感。这并非一个简单的CSS属性就能直接实现，它更像是一种技术组合，需要一点点拆解和耐心。
解决方案
要实现竖向波浪文字，你需要将文本拆分成单个字符（或者至少是小块），然后对每个字符应用垂直书写模式和独立的动画。
HTML 结构： 首先，将你的文字用
<span>标签包裹起来，每个字符一个
<span>。这通常需要JavaScript来动态完成，但为了演示CSS部分，我们假设HTML已经准备好：
<div class="wavy-text-container">
<span style="--i:0;">波</span>
<span style="--i:1;">浪</span>
<span style="--i:2;">文</span>
<span style="--i:3;">字</span>
<span style="--i:4;">效</span>
<span style="--i:5;">果</span>
</div>这里我用了一个CSS变量
--i来表示每个字符的索引，这在后续设置动画延迟时会非常方便。
立即学习“前端免费学习笔记（深入）”；
CSS 样式：
.wavy-text-container {
display: flex; /* 或者 block，但flex便于整体居中 */
writing-mode: vertical-lr; /* 文字从左到右垂直排列 */
font-size: 3em;
font-family: 'Arial', sans-serif;
color: #333;
height: 300px; /* 给容器一个高度，以便文字垂直显示 */
justify-content: center; /* 如果是flex，可以居中 */
align-items: center;
overflow: hidden; /* 避免波浪超出容器 */
}
.wavy-text-container span {
display: inline-block; /* 确保transform能正常作用 */
animation: waveEffect 1.5s ease-in-out infinite;
/* 通过CSS变量控制延迟，制造波浪效果 */
animation-delay: calc(var(--i) * 0.1s);
transform-origin: center bottom; /* 旋转中心可以调整 */
}
@keyframes waveEffect {
0%, 100% {
transform: translateY(0) rotate(0deg); /* 初始和结束状态 */
}
25% {
transform: translateY(-10px) rotate(5deg); /* 向上移动并轻微旋转 */
}
75% {
transform: translateY(10px) rotate(-5deg); /* 向下移动并轻微旋转 */
}
}这个例子中，
waveEffect动画让每个字符上下浮动并伴随轻微旋转，
animation-delay则让它们依次动起来，形成连贯的波浪感。
为什么直接使用writing-mode和transform不够？
嗯，这是个好问题，也是我当初踩过的一个坑。当你第一次想到“竖向波浪”的时候，很自然地会想到
writing-mode让文字竖起来，然后用
transform来“扭一扭”对吧？但现实是，
writing-mode: vertical-lr;（或者
vertical-rl）仅仅是改变了文字的排版方向，它让整段文字从横向变成了纵向，但文字本身还是一个整体。如果你直接对这个整体的
div或者
p标签应用
transform: rotate()或者
translateY()，你会发现它只是把整个文字块作为一个整体进行了旋转或移动，根本不会出现那种单个字上下起伏、左右摇摆的“波浪”感。
波浪的精髓在于连续性和个体差异。想象一下海浪，每一个波峰和波谷都是由无数水滴协同运动形成的，但每个水滴在不同时刻的位置和状态都不完全相同。文字波浪也是一样，你需要让每个字拥有自己的“生命”，在不同的时间点执行不同的动画片段。这意味着你必须把文字拆开，让每个字符成为一个独立的动画单元。这就是为什么上面解决方案里，我强调要用
<span>把每个字包起来的原因。没有这种颗粒度上的控制，
writing-mode和
transform就只能是“大块头”的搬运工，而无法成为“精雕细琢”的艺术家。这就像你想给一棵树的每片叶子都涂上不同的颜色，结果你却只拿到了整个树的画笔。
如何精细控制波浪的形状和速度？
要精细控制波浪的形状和速度，我们主要在
@keyframes规则和
animation属性上下功夫。这就像是给波浪定调子和节奏。
首先是形状，这主要由
@keyframes内部的
transform属性值和百分比节点决定。
-
位移（
translate
）：如果你想要波浪高低起伏，就调整translateY
的值。比如，从translateY(0)
到translateY(-10px)
再到translateY(10px)
，就能形成一个上下往复的运动。数值越大，波浪幅度越大。 -
旋转（
rotate
）：如果希望文字在波浪中还能有点“摇摆”感，就加入rotate
。比如rotate(5deg)
和rotate(-5deg)
，能让文字在上下移动时稍微倾斜，增加动感。 -
缩放（
scale
）：甚至可以加入scale
，让文字在波峰时略微放大，在波谷时略微缩小，增加视觉冲击力。但这个要慎用，容易显得过于花哨。 -
动画时间函数（
animation-timing-function
）：这是控制波浪“曲线”的关键。默认是ease
，但你可以尝试：linear
：匀速运动，波浪会显得比较机械。ease-in-out
：两端慢中间快，波浪会显得更自然、更流畅，有“呼吸感”。cubic-bezier(...)
：如果你想完全自定义波浪的加速和减速曲线，这是最强大的工具。你可以用在线工具生成一个你想要的曲线，然后把对应的贝塞尔曲线值填进去。这能创造出非常独特的波浪“性格”。
其次是速度，这主要由
animation-duration和
animation-delay控制。
-
animation-duration
：这个值决定了单个字符完成一个完整波浪周期的时间。值越小，波浪速度越快；值越大，波浪越缓慢。你可以根据整体氛围来调整，比如活泼的标题可以用短一点的周期，禅意的文字可能需要长一点的周期。 -
animation-delay
：这是制造“波浪”效果的关键。通过calc(var(--i) * 0.1s)
这样的表达式，我们让每个字符的动画开始时间错开。0.1s
这个值就是波浪的“传播速度”。值越小，波浪看起来传播得越快，字符之间的间隔越紧密；值越大，波浪传播越慢，字符之间的错位感更明显。调整这个值，可以控制波浪的“密集度”和“流动感”。 -
animation-iteration-count
：控制波浪重复的次数，infinite
就是无限循环。如果你只想让波浪出现一次然后停止，可以设置为一个具体的数字。
通过这些参数的组合和微调，你几乎可以实现任何你想要的波浪效果，从平静的涟漪到汹涌的波涛，一切尽在你的掌握之中。
除了波浪，这种技术还能实现哪些文字效果？
这种将文字拆分成独立可控单元，并结合
writing-mode（如果需要垂直排版）和
transform动画的技术，潜力远不止于波浪效果。它打开了一扇通往各种字符级动态效果的大门，简直是文字动画的“万能钥匙”。
我脑子里立刻蹦出好几个点子：
“呼吸”或“脉冲”文字：让每个字符周期性地进行轻微的缩放（
scale
）或透明度（opacity
）变化，配合animation-delay
，可以营造出文字在“呼吸”或“心跳”的感觉。想象一下，一个标题，每个字都在轻微地膨胀收缩，非常适合做一些氛围感强的展示。“抖动”或“故障（Glitch）”文字：通过快速、随机的
translate
、rotate
和skew
变化，并配合filter: blur()
或drop-shadow()
，可以模拟出数字信号故障或老旧录像带的抖动效果。这种通常需要steps()
动画函数或者更复杂的JavaScript来生成随机值，但核心思路是一致的。“逐字出现/消失”效果：结合
opacity
和transform
（比如translateY
从-20px到0），再利用animation-delay
，可以实现文字像打字机一样一个字一个字地浮现出来，或者像墨迹消散一样一个字一个字地消失。这比简单的fade-in
效果要生动得多。“弹跳”或“下落”文字：每个字符从上方或下方“弹跳”进入指定位置，模拟重力效果。这需要更精细的
@keyframes
来模拟物理反弹，比如利用cubic-bezier
曲线模拟弹簧效果。“文字云”动态：如果将文字分散在页面上，每个字符都有自己的动画，比如随机的
translate
和rotate
，就能形成一个动态的“文字云”效果。用户鼠标悬停时，某个字符可能还会做出反应。“翻转”或“旋转”文字：让每个字符围绕自身轴线进行3D旋转（
rotateX
,rotateY
,rotateZ
），可以创造出文字像卡片一样翻转的效果。这在一些交互式标题或导航中可能会很有趣。
核心思想是，一旦你把文字分解成独立的、可操作的单元，并且掌握了
transform和
animation的组合，你就能跳出传统的文本框限制，让文字真正“活”起来。这不仅仅是视觉上的吸引力，更是一种传递信息和情感的有力方式。当然，实现这些效果时，要时刻注意性能，避免过度复杂的动画导致页面卡顿。
