CSS正弦波文字浮动动画教程：实现平滑的字母旋转效果-html教程-PHP中文网

CSS正弦波文字浮动动画教程：实现平滑的字母旋转效果

DDD

发布： 2025-11-20 11:56:09

原创

655人浏览过

css正弦波文字浮动动画教程：实现平滑的字母旋转效果

本教程详细介绍了如何利用CSS创建文字在正弦波上浮动的动态效果，并着重解决字母在波浪起伏时平滑旋转的关键技术。通过精心调整CSS关键帧动画的持续时间、缓动函数以及字母间的动画延迟，我们将指导您实现文字随波浪自然倾斜并流畅运动的专业级视觉效果。

在现代网页设计中，动态视觉效果能够显著提升用户体验。其中，文字沿着特定路径（如正弦波）浮动并伴随自然旋转的动画，是一种极具吸引力的表现形式。本文将深入探讨如何使用纯CSS实现这种效果，特别是如何确保每个字母在波浪运动中保持平滑且与波浪形态同步的旋转。

核心概念与HTML结构

要实现文字的独立运动和旋转，我们需要将文本拆分为单个字符，并为每个字符应用独立的动画。

HTML结构： 我们将使用一个容器 text-anim-wrapper 来包裹所有独立的字符元素 text-anim。

<div class="text-anim-wrapper">
  <div class="text-anim">V</div>
  <div class="text-anim">I</div>
  <div class="text-anim">C</div>
  <div class="text-anim">T</div>
  <div class="text-anim">O</div>
  <div class="text-anim">R</div>
  <div class="text-anim">I</div>
  <div class="text-anim">N</div>
  <div class="text-anim">E</div>
</div>

登录后复制

CSS基础样式与动画定义

首先，设置页面的基本样式和动画容器的属性。

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

html,
body {
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
}

.text-anim-wrapper {
    position: relative; /* 相对定位，作为子元素绝对定位的参照 */
    overflow: hidden;   /* 隐藏超出容器的文字 */
    height: 150px;      /* 设置容器高度 */
}

.text-anim {
    position: absolute; /* 绝对定位，使每个字母独立 */
    left: calc(100% + 200px); /* 初始位置在屏幕右侧外部 */
    width: 20px;        /* 字母宽度 */
    font-size: 24px;
    color: white;
    font-weight: bold;
    /* 初始旋转角度，可以根据需要调整 */
    transform: rotate(0deg); 
    /* 组合三个动画：水平移动、垂直波浪、旋转 */
    animation: flight-right-to-left 16s linear infinite, 
               curve 8s ease-in-out infinite, 
               curve-rotate 8s ease-in-out infinite;
}

登录后复制

动画定义：

flight-right-to-left (水平移动动画) 这个动画负责让文字从屏幕右侧移动到左侧，实现持续的“飞行”效果。
```
@keyframes flight-right-to-left {
    0% {
        left: 100%; /* 从屏幕右侧边缘开始 */
    }
    100% {
        left: -20px; /* 移动到屏幕左侧外部 */
    }
}
```
登录后复制
动画持续时间设置为 16s，linear 缓动函数确保匀速移动。
curve (垂直波浪动画) 这个动画定义了文字的上下浮动路径，模拟正弦波的垂直运动。
```
@keyframes curve {
    0% {
        top: 50px; /* 初始位置 */
    }
    25% {
        top: 0;    /* 达到波峰 */
    }
    50% {
        top: 50px; /* 达到波谷 */
    }
    75% {
        top: 0;    /* 再次达到波峰 */
    }
    100% {
        top: 50px; /* 返回初始位置，完成一个周期 */
    }
}
```
登录后复制
动画持续时间为 8s，ease-in-out 缓动函数使运动在波峰和波谷处更平滑。

OmniAudio
OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客，并生成可在常见 Podcast ap

111

查看详情

curve-rotate (平滑旋转动画) 这是实现字母随波浪平滑旋转的关键。旋转角度需要与垂直波浪的“坡度”同步。当文字上升时，应向前倾斜；当文字下降时，应向后倾斜；在波峰和波谷处，应保持水平。

@keyframes curve-rotate {
    0% {
      transform: rotate(0deg);  /* 初始水平 */
    }
    12.5% {
      transform: rotate(25deg); /* 上升过程中向前倾斜 */
    }
    25% {
        transform: rotate(0deg);  /* 达到波峰时水平 */
    }
    37.5% {
      transform: rotate(-25deg);/* 下降过程中向后倾斜 */
    }
    50% {
        transform: rotate(0deg);  /* 达到波谷时水平 */
    }
    62.5% {
      transform: rotate(25deg); /* 再次上升过程中向前倾斜 */
    }
    75% {
        transform: rotate(0deg);  /* 再次达到波峰时水平 */
    }
    87.5% {
      transform: rotate(-25deg);/* 再次下降过程中向后倾斜 */
    }
    100% {
        transform: rotate(0deg);  /* 返回初始水平状态 */
    }
}

登录后复制

curve-rotate 动画的持续时间也为 8s，与 curve 动画同步。ease-in-out 缓动函数确保旋转过程的平滑自然。注意，curve-rotate 的关键帧百分比与 curve 的关键帧百分比（0%, 25%, 50%, 75%, 100%）巧妙地对应，使得旋转与垂直运动的坡度完美匹配。例如，当 curve 从 0% 到 25% 上升时，curve-rotate 在 12.5% 达到最大正倾斜。

字母动画延迟

为了让每个字母依次呈现波浪和旋转效果，而不是同时运动，我们需要为它们设置不同的 animation-delay。

.text-anim:nth-child(1) {
    animation-delay: 0s;
}
.text-anim:nth-child(2) {
    animation-delay: .25s;
}
.text-anim:nth-child(3) {
    animation-delay: .5s;
}
.text-anim:nth-child(4) {
    animation-delay: .75s;
}
.text-anim:nth-child(5) {
    animation-delay: 1s;
}
.text-anim:nth-child(6) {
    animation-delay: 1.25s;
}
.text-anim:nth-child(7) {
    animation-delay: 1.5s;
}
.text-anim:nth-child(8) {
    animation-delay: 1.75s;
}
.text-anim:nth-child(9) {
    animation-delay: 2s;
}

登录后复制

通过为每个 nth-child 元素设置递增的 animation-delay，我们创建了一个错位的动画效果，使得字母看起来像在互相追随，形成连贯的波浪。

完整代码示例

将上述HTML和CSS整合，即可得到完整的正弦波文字浮动动画。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS正弦波文字动画</title>
    <style>
       html,
        body{
            margin: 0;
            padding: 0;
            background-color: black;
            font-family: Arial, Helvetica, sans-serif;
        }
        .text-anim-wrapper{
            position: relative;
            overflow: hidden;
            height: 150px;
        }

        .text-anim{
            position: absolute;
            left: calc(100% + 200px);
            width: 20px;
            font-size: 24px;
            color: white;
            font-weight: bold;
            transform: rotate(0deg); /* 初始旋转设为0，由动画控制 */
            animation: flight-right-to-left 16s linear infinite, 
                       curve 8s ease-in-out infinite, 
                       curve-rotate 8s ease-in-out infinite;
        }
        .text-anim:nth-child(1) {
            animation-delay: 0s;
        }
        .text-anim:nth-child(2) {
            animation-delay: .25s;
        }
        .text-anim:nth-child(3) {
            animation-delay: .5s;
        }
        .text-anim:nth-child(4) {
            animation-delay: .75s;
        }
        .text-anim:nth-child(5) {
            animation-delay: 1s;
        }
        .text-anim:nth-child(6) {
            animation-delay: 1.25s;
        }
        .text-anim:nth-child(7) {
            animation-delay: 1.5s;
        }
        .text-anim:nth-child(8) {
            animation-delay: 1.75s;
        }
        .text-anim:nth-child(9) {
            animation-delay: 2s;
        }

        @keyframes flight-right-to-left {
            0%{
                left: 100%;
            }
            100%{
                left: -20px;
            }
        }
        @keyframes curve {
            0%{
                top: 50px;
            }
            25%{
                top: 0;
            }
            50%{
                top: 50px;
            }
            75%{
                top: 0;
            }
            100%{
                top: 50px;
            }
        }
        @keyframes curve-rotate {
            0% {
              transform: rotate(0deg);
            }
            12.5% {
              transform: rotate(25deg);
            }
            25%{
                transform: rotate(0deg);
            }
            37.5% {
              transform: rotate(-25deg);
            }
            50%{
                transform: rotate(0deg);
            }
            62.5% {
              transform: rotate(25deg);
            }
            75%{
                transform: rotate(0deg);
            }
            87.5% {
              transform: rotate(-25deg);
            }
            100%{
                transform: rotate(0deg);
            }
        }
    </style>
  </head>
  <body>
    <div class="text-anim-wrapper">
      <div class="text-anim">V</div>
      <div class="text-anim">I</div>
      <div class="text-anim">C</div>
      <div class="text-anim">T</div>
      <div class="text-anim">O</div>
      <div class="text-anim">R</div>
      <div class="text-anim">I</div>
      <div class="text-anim">N</div>
      <div class="text-anim">E</div>
    </div>
  </body>
</html>

登录后复制

关键注意事项

屏幕宽度适应性： 此动画的视觉效果在全屏页面中表现最佳。如果页面宽度较小，您可能需要调整 flight-right-to-left 的动画时长 (16s)，以及 curve 和 curve-rotate 的动画时长 (8s)，以确保动画在不同尺寸下都能保持良好的视觉体验。例如，缩短 flight-right-to-left 的时长会使文字移动更快。
动画同步与平滑度：
- curve 和 curve-rotate 动画的持续时间必须保持一致（本例中为 8s），以确保垂直运动和旋转动作的完美同步。
- ease-in-out 缓动函数对于这两个动画至关重要，它使得动画在开始和结束时平稳加速和减速，从而产生更自然的波浪和旋转效果。
- curve-rotate 的关键帧设计是实现平滑旋转的核心。它通过在波浪上升和下降的中间点设置倾斜角度，并在波峰和波谷处恢复水平，来模拟物体在曲线上运动时的自然姿态。
字母间距调整： 通过修改 .text-anim:nth-child() 中 animation-delay 的增量值，您可以控制字母在波浪中跟随的紧密程度。减小增量会使字母更紧密地排列，增大增量则会增加它们之间的视觉距离。
性能考量： 当动画的字符数量非常多时，每个字符都拥有独立的动画可能会对浏览器性能造成一定压力。在这种情况下，可以考虑使用JavaScript来动态管理动画，或者采用SVG路径动画等更高效的解决方案。

总结

通过本教程，您已经掌握了如何使用CSS关键帧动画创建文字在正弦波上浮动并平滑旋转的动态效果。关键在于精确同步垂直运动 (curve) 和旋转 (curve-rotate) 动画的关键帧和缓动函数，并利用 animation-delay 实现字符间的错位效果。这种技术不仅提升了页面的视觉吸引力，也展示了CSS动画在实现复杂动态效果方面的强大能力。

以上就是CSS正弦波文字浮动动画教程：实现平滑的字母旋转效果的详细内容，更多请关注php中文网其它相关文章！