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

要实现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实现丰富视觉表现。

要实现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

来表示每个字符的索引，这在后续设置动画延迟时会非常方便。

<span>立即学习“前端免费学习笔记（深入）”；

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

动画的技术，潜力远不止于波浪效果。它打开了一扇通往各种字符级动态效果的大门，简直是文字动画的“万能钥匙”。

我脑子里立刻蹦出好几个点子：

1. “呼吸”或“脉冲”文字：让每个字符周期性地进行轻微的缩放（

   scale

   ）或透明度（

   opacity

   ）变化，配合

   animation-delay

   ，可以营造出文字在“呼吸”或“心跳”的感觉。想象一下，一个标题，每个字都在轻微地膨胀收缩，非常适合做一些氛围感强的展示。

2. “抖动”或“故障（Glitch）”文字：通过快速、随机的

   translate

   、

   rotate

   和

   skew

   变化，并配合

   filter: blur()

   或

   drop-shadow()

   ，可以模拟出数字信号故障或老旧录像带的抖动效果。这种通常需要

   steps()

   动画函数或者更复杂的JavaScript来生成随机值，但核心思路是一致的。

3. “逐字出现/消失”效果：结合

   opacity

   和

   transform

   （比如

   translateY

   从-20px到0），再利用

   animation-delay

   ，可以实现文字像打字机一样一个字一个字地浮现出来，或者像墨迹消散一样一个字一个字地消失。这比简单的

   fade-in

   效果要生动得多。

4. “弹跳”或“下落”文字：每个字符从上方或下方“弹跳”进入指定位置，模拟重力效果。这需要更精细的

   @keyframes

   来模拟物理反弹，比如利用

   cubic-bezier

   曲线模拟弹簧效果。

5. “文字云”动态：如果将文字分散在页面上，每个字符都有自己的动画，比如随机的

   translate

   和

   rotate

   ，就能形成一个动态的“文字云”效果。用户鼠标悬停时，某个字符可能还会做出反应。

6. “翻转”或“旋转”文字：让每个字符围绕自身轴线进行3D旋转（

   rotateX

   ,

   rotateY

   ,

   rotateZ

   ），可以创造出文字像卡片一样翻转的效果。这在一些交互式标题或导航中可能会很有趣。

核心思想是，一旦你把文字分解成独立的、可操作的单元，并且掌握了

transform

和

animation

的组合，你就能跳出传统的文本框限制，让文字真正“活”起来。这不仅仅是视觉上的吸引力，更是一种传递信息和情感的有力方式。当然，实现这些效果时，要时刻注意性能，避免过度复杂的动画导致页面卡顿。