波浪文字效果

一个普通编程爱好者

于 2025-02-06 21:25:55 发布

阅读量384

点赞数 4

分类专栏：创意css效果文章标签：创意css

本文链接：https://blog.csdn.net/2302_80513405/article/details/145482239

版权

创意css效果专栏收录该内容

5 篇文章

订阅专栏

波浪文字效果

**推荐一个在线运行代码工具，可直接复制过去查看效果：**HTML5在线运行,代码测试 - 在线编辑器(cainiaojc.com

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>波浪文字</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #222;
        }

        .wave-text {
            font-size: 50px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .wave-text span {
            display: inline-block;
            color: #35c6ff;
            animation: wave 2s ease-in-out infinite;
            animation-delay: calc(0.1s * var(--i));
        }

        @keyframes wave {
            0% {
                transform: translateY(0px);
            }

            20% {
                transform: translateY(-20px);
            }

            40%,
            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>

<body>
    <div class="wave-text">
        <span style="--i:1">波</span>
        <span style="--i:2">浪</span>
        <span style="--i:3">文</span>
        <span style="--i:4">字</span>
    </div>
</body>

</html>