CSS怎样实现文字竖向波浪？writing-mode+transform

看不見的法師

发布时间：2025-08-15 13:38:01

730人浏览过

来源于php中文网

原创

要实现css文字竖向波浪效果，需将文字拆分为单个字符并分别应用动画。1. 使用javascript或手动将每个字符包裹在中，并设置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实现丰富视觉表现。

CSS怎样实现文字竖向波浪？writing-mode+transform

要实现CSS文字竖向波浪效果，核心在于结合

writing-mode

将文字垂直排列，再通过

transform

和

animation

对每个字符进行精细的位移或旋转，并巧妙地利用

animation-delay

制造出波浪般的连续动态感。这并非一个简单的CSS属性就能直接实现，它更像是一种技术组合，需要一点点拆解和耐心。

解决方案

要实现竖向波浪文字，你需要将文本拆分成单个字符（或者至少是小块），然后对每个字符应用垂直书写模式和独立的动画。

HTML 结构： 首先，将你的文字用

标签包裹起来，每个字符一个

。这通常需要JavaScript来动态完成，但为了演示CSS部分，我们假设HTML已经准备好：

这里我用了一个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

或者

标签应用

transform: rotate()

或者

translateY()

，你会发现它只是把整个文字块作为一个整体进行了旋转或移动，根本不会出现那种单个字上下起伏、左右摇摆的“波浪”感。

波浪的精髓在于连续性和个体差异。想象一下海浪，每一个波峰和波谷都是由无数水滴协同运动形成的，但每个水滴在不同时刻的位置和状态都不完全相同。文字波浪也是一样，你需要让每个字拥有自己的“生命”，在不同的时间点执行不同的动画片段。这意味着你必须把文字拆开，让每个字符成为一个独立的动画单元。这就是为什么上面解决方案里，我强调要用

把每个字包起来的原因。没有这种颗粒度上的控制，

writing-mode

和

transform

就只能是“大块头”的搬运工，而无法成为“精雕细琢”的艺术家。这就像你想给一棵树的每片叶子都涂上不同的颜色，结果你却只拿到了整个树的画笔。

如何精细控制波浪的形状和速度？

要精细控制波浪的形状和速度，我们主要在

@keyframes

规则和

animation

属性上下功夫。这就像是给波浪定调子和节奏。

首先是形状，这主要由

@keyframes

内部的

transform

属性值和百分比节点决定。

ProcessOn

免费在线流程图思维导图，专业强大的作图工具，支持多人实时在线协作

下载

位移（
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
```
），可以创造出文字像卡片一样翻转的效果。这在一些交互式标题或导航中可能会很有趣。