CSS怎样实现文字竖向波浪效果？writing-mode+transform方案详解

在网页设计中，文字动效可以提升页面的视觉吸引力，竖向波浪文字效果常被用于标题、 slogan 展示等场景。使用CSS的writing-mode和transform属性组合，不需要复杂的JavaScript逻辑，就能实现流畅的竖向波浪效果，适配多种设计需求。

核心属性说明

writing-mode属性

writing-mode用于控制文字的排版方向，常用的取值有：

• horizontal-tb：默认值，文字水平排列，从上到下换行
• vertical-rl：文字垂直排列，从右到左换行，符合传统中文竖排阅读习惯
• vertical-lr：文字垂直排列，从左到右换行

实现竖向文字首先需要设置writing-mode为vertical-rl或者vertical-lr，让文字先纵向排列。

transform属性

transform用于对元素进行旋转、位移、缩放等变换，实现波浪效果主要用到两个函数：

• translateY()：控制元素在垂直方向的位移，让每个文字产生上下起伏
• rotate()：控制元素旋转角度，可调整文字的倾斜状态，让波浪更自然

完整实现步骤

1. HTML结构搭建

首先将需要展示的文字拆分成单个字符，每个字符用<span>包裹，方便单独设置变换效果。

<div class="wave-text">
  <span>竖</span>
  <span>向</span>
  <span>波</span>
  <span>浪</span>
  <span>文</span>
  <span>字</span>
</div>

2. 基础样式设置

先设置容器的基础样式，将文字转为竖向排列，同时去掉默认的间距，让文字排列更紧凑。

.wave-text {
  /* 设置文字竖向排列，从右到左换行 */
  writing-mode: vertical-rl;
  /* 字体大小 */
  font-size: 32px;
  /* 字体加粗 */
  font-weight: bold;
  /* 文字颜色 */
  color: #333;
  /* 去掉span之间的默认间距 */
  letter-spacing: 0;
  /* 让容器居中展示 */
  display: flex;
  justify-content: center;
  margin: 50px auto;
}

.wave-text span {
  /* 设置过渡效果，让变换更平滑 */
  transition: transform 0.3s ease;
  /* 每个span之间留一点间距 */
  margin: 0 8px;
}

3. 添加波浪变换效果

通过nth-child选择器给不同位置的<span>设置不同的transform值，形成波浪起伏的效果。这里使用translateY控制上下位移，rotate控制轻微旋转，让波浪更自然。

/* 第1个字符向上位移，轻微右旋 */
.wave-text span:nth-child(1) {
  transform: translateY(-10px) rotate(3deg);
}
/* 第2个字符向下位移，轻微左旋 */
.wave-text span:nth-child(2) {
  transform: translateY(5px) rotate(-2deg);
}
/* 第3个字符向上位移，旋转角度更大 */
.wave-text span:nth-child(3) {
  transform: translateY(-15px) rotate(5deg);
}
/* 第4个字符向下位移，旋转角度更大 */
.wave-text span:nth-child(4) {
  transform: translateY(10px) rotate(-4deg);
}
/* 第5个字符向上位移，中等旋转 */
.wave-text span:nth-child(5) {
  transform: translateY(-8px) rotate(2deg);
}
/* 第6个字符向下位移，中等旋转 */
.wave-text span:nth-child(6) {
  transform: translateY(6px) rotate(-3deg);
}

4. 添加悬停动态效果（可选）

如果需要鼠标悬停时产生动态波浪效果，可以添加动画，让每个文字的位移和旋转产生周期性变化。

/* 定义波浪动画 */
@keyframes wave {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-12px) rotate(4deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(8px) rotate(-3deg);
  }
}

/* 鼠标悬停时给每个span添加动画，设置不同的延迟形成波浪效果 */
.wave-text:hover span:nth-child(1) {
  animation: wave 1.2s ease-in-out infinite;
}
.wave-text:hover span:nth-child(2) {
  animation: wave 1.2s ease-in-out 0.1s infinite;
}
.wave-text:hover span:nth-child(3) {
  animation: wave 1.2s ease-in-out 0.2s infinite;
}
.wave-text:hover span:nth-child(4) {
  animation: wave 1.2s ease-in-out 0.3s infinite;
}
.wave-text:hover span:nth-child(5) {
  animation: wave 1.2s ease-in-out 0.4s infinite;
}
.wave-text:hover span:nth-child(6) {
  animation: wave 1.2s ease-in-out 0.5s infinite;
}

效果调整技巧

• 调整writing-mode的取值，可以切换竖向排列的方向，vertical-lr是从左到右竖向排列，适合不同的设计布局
• 修改translateY的数值，可以控制波浪的起伏幅度，数值越大起伏越明显
• 调整rotate的角度，可以让波浪的倾斜程度更符合设计需求，角度建议控制在正负5度以内，避免文字过于倾斜影响阅读
• 如果使用动态动画，调整animation-delay的间隔，可以改变波浪的传播速度，间隔越小波浪越密集

兼容性说明

writing-mode和transform都是CSS3的标准属性，现代浏览器（Chrome、Firefox、Safari、Edge）都支持良好，如果需要兼容旧版IE浏览器，可以添加前缀：-ms-writing-mode对应IE的私有实现，不过目前大部分项目已经不需要兼容旧版IE，直接使用标准属性即可。

CSSwriting-modetransform文字竖向波浪修改时间：2026-07-02 09:33:25