要实现
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
和
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
或者
p
标签应用
transform: rotate()
或者
translateY()
，你会发现它只是把整个文字块作为一个整体进行了旋转或移动，根本不会出现那种单个字上下起伏、左右摇摆的“波浪”感。
波浪的精髓在于
连续性
和
个体差异
。想象一下海浪，每一个波峰和波谷都是由无数水滴协同运动形成的，但每个水滴在不同时刻的位置和状态都不完全相同。文字波浪也是一样，你需要让每个字拥有自己的“生命”，在不同的时间点执行不同的动画片段。这意味着你必须把文字拆开，让每个字符成为一个独立的动画单元。这就是为什么上面解决方案里，我强调要用
把每个字包起来的原因。没有这种颗粒度上的控制，
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
控制。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
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
的组合，你就能跳出传统的文本框限制，让文字真正“活”起来。这不仅仅是视觉上的吸引力，更是一种传递信息和情感的有力方式。当然，实现这些效果时，要时刻注意性能，避免过度复杂的动画导致页面卡顿。
