CSS怎样制作波浪文字效果？mask-image应用

CSS的mask-image属性可以为元素添加遮罩层，遮罩层的透明区域会隐藏元素对应部分，不透明区域则保留元素内容，利用这个特性结合波浪形状的遮罩，就能做出文字的波浪效果。

核心原理说明

波浪文字效果的实现逻辑主要分为两步，首先要准备一张波浪形状的透明遮罩图，然后通过mask-image属性把这张图应用到文字元素上，最后让遮罩图水平移动，就能形成文字被波浪切割的动态效果。

这里用到的mask相关属性说明如下：

• mask-image：指定遮罩层的图片资源，支持url引入图片或者使用渐变生成
• mask-size：设置遮罩图的尺寸，这里需要让遮罩图宽度超过元素宽度，保证移动时不会出现空白
• mask-repeat：设置遮罩图的重复方式，水平方向重复才能保证移动时连续
• mask-position：设置遮罩图的位置，通过改变这个值实现遮罩移动动画

完整实现步骤

1. 基础HTML结构

首先创建包含文字的容器元素，代码如下：

<div class="wave-text">波浪文字效果演示</div>

2. 基础文字样式配置

先给文字设置基础样式，保证文字足够清晰，方便观察效果：

.wave-text {
    font-size: 60px;
    font-weight: bold;
    color: #2c7be5;
    /* 确保元素有足够宽度容纳移动的遮罩 */
    display: inline-block;
    padding: 20px;
}

3. 制作波浪遮罩图

我们可以用CSS渐变直接生成简单的波浪遮罩，不需要额外引入图片资源，代码如下：

.wave-text {
    /* 其他基础样式同上 */
    /* 波浪遮罩配置 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath d='M0,100 C150,200 350,0 500,100 C650,200 850,0 1000,100 C1150,200 1350,0 1500,100 L1500,200 L0,200 Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath d='M0,100 C150,200 350,0 500,100 C650,200 850,0 1000,100 C1150,200 1350,0 1500,100 L1500,200 L0,200 Z' fill='white'/%3E%3C/svg%3E");
    /* 遮罩尺寸设置为宽度是元素的2倍，高度100% */
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    /* 水平方向重复遮罩 */
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    /* 初始遮罩位置 */
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

4. 添加波浪移动动画

通过修改mask-position的x轴值，让遮罩水平移动，形成波浪流动的效果：

@keyframes waveMove {
    0% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    100% {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

.wave-text {
    /* 其他样式同上 */
    /* 应用动画，持续3秒，无限循环，线性匀速 */
    -webkit-animation: waveMove 3s linear infinite;
    animation: waveMove 3s linear infinite;
}

兼容性与注意事项

mask-image属性在部分旧版本浏览器中需要添加-webkit-前缀才能生效，目前主流现代浏览器都已经支持该属性。如果需要在移动端使用，建议先测试对应系统浏览器的支持情况。

如果遮罩图是外部引入的图片，要注意图片的透明通道是否正确，只有白色（不透明）和透明区域才能正确实现遮罩效果，其他颜色会被当作不透明处理。另外mask-size的宽度要足够大，避免动画过程中出现遮罩断层的问题。

效果调整技巧

如果需要调整波浪的起伏频率，可以修改遮罩SVG中路径的控制点数值；如果需要调整波浪流动的速度，只需要修改动画的持续时间即可。如果要实现文字颜色渐变的效果，可以给文字元素添加background渐变，再配合mask-image属性，就能得到彩色波浪文字的效果。

CSSmask-image波浪文字效果前端动画修改时间：2026-06-17 12:21:54