运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

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

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;
}

动画定义：

  1. flight-right-to-left (水平移动动画) 这个动画负责让文字从屏幕右侧移动到左侧，实现持续的“飞行”效果。

    @keyframes flight-right-to-left {
    0% {
        left: 100%; /* 从屏幕右侧边缘开始 */
    }
    100% {
        left: -20px; /* 移动到屏幕左侧外部 */
    }
}

    动画持续时间设置为 16s，linear 缓动函数确保匀速移动。

  2. curve (垂直波浪动画) 这个动画定义了文字的上下浮动路径，模拟正弦波的垂直运动。

    @keyframes curve {
    0% {
        top: 50px; /* 初始位置 */
    }
    25% {
        top: 0;    /* 达到波峰 */
    }
    50% {
        top: 50px; /* 达到波谷 */
    }
    75% {
        top: 0;    /* 再次达到波峰 */
    }
    100% {
        top: 50px; /* 返回初始位置，完成一个周期 */
    }
}

    动画持续时间为 8s，ease-in-out 缓动函数使运动在波峰和波谷处更平滑。

    AI at Meta AI at Meta

    Facebook 旗下的AI研究平台

    AI at Meta 72 查看详情 AI at Meta

  3. 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>

关键注意事项

  1. 屏幕宽度适应性： 此动画的视觉效果在全屏页面中表现最佳。如果页面宽度较小，您可能需要调整 flight-right-to-left 的动画时长 (16s)，以及 curve 和 curve-rotate 的动画时长 (8s)，以确保动画在不同尺寸下都能保持良好的视觉体验。例如，缩短 flight-right-to-left 的时长会使文字移动更快。

  2. 动画同步与平滑度：

    • curve 和 curve-rotate 动画的持续时间必须保持一致（本例中为 8s），以确保垂直运动和旋转动作的完美同步。
    • ease-in-out 缓动函数对于这两个动画至关重要，它使得动画在开始和结束时平稳加速和减速，从而产生更自然的波浪和旋转效果。
    • curve-rotate 的关键帧设计是实现平滑旋转的核心。它通过在波浪上升和下降的中间点设置倾斜角度，并在波峰和波谷处恢复水平，来模拟物体在曲线上运动时的自然姿态。

  3. 字母间距调整： 通过修改 .text-anim:nth-child() 中 animation-delay 的增量值，您可以控制字母在波浪中跟随的紧密程度。减小增量会使字母更紧密地排列，增大增量则会增加它们之间的视觉距离。

  4. 性能考量： 当动画的字符数量非常多时，每个字符都拥有独立的动画可能会对浏览器性能造成一定压力。在这种情况下，可以考虑使用J*aScript来动态管理动画，或者采用SVG路径动画等更高效的解决方案。

总结

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

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


# 时长  # 普陀区营销推广费用  # 云无限网站优化公司排名  # 协会网站建设制作  # 南充seo排名好不好  # 宿迁租房网站建设  # 地方门户网站建设银行  # 临沂松原网站优化  # 深圳麻涌网站建设  # 销售推销推广营销  # 网站优化企业谁家好  # 自适应  # 全选  # 如何使用  # 会使  # 双击  # css  # 持续时间  # 过程中  # 正弦波  # 绝对定位  # 排列  # css动画  # 网页设计  # edge  # app  # 浏览器  # svg  # html  # java  # javascript 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： windows server2019显卡驱动怎么安装_winserver2019显卡驱动安装与远程桌面优化  Django模型动态关联检查：高效管理复杂关系  Python对象引用与属性赋值：理解链表中的行为  WooCommerce购物车：强制显示所有交叉销售商品教程  《全民k歌》音乐怎么下载到本地2025  虫虫助手如何更新游戏  Sublime怎么格式化HTML代码_Sublime前端代码美化插件使用指南  Python模块化编程：避免循环导入与共享函数的最佳实践  sublime如何撤销关闭的标签页_sublime重新打开已关闭文件技巧  《米姆米姆哈》米姆获取及技能攻略  使用jQuery精确检测除指定元素外任意位置的点击事件  高效调试PHP大型嵌套数组：JSON序列化与可视化工具实践  AO3中文入口稳定分享_AO3官网HTTPS看文详解  《友玩*》创建群聊方法  德邦快递查询入口登录官网 德邦快递单号查询系统入口  《小黑盒》删除历史浏览方法  vivo浏览器怎么离线保存网页 vivo浏览器下载完整页面以便无网络时阅读  餐馆菜篮选购指南  智云Q3和Q2有什么升级_智云Q3与Q2手持云台功能与性能对比分析  解决Pandas DataFrame高度碎片化警告：高效创建多列的策略  百度小说看书时如何翻页_百度小说手动翻页与自动翻页设置  创客贴登录页面入口 创客贴网页版最新网址链接  电脑开不了机怎么办 电脑无法开机的解决方法  以下哪一个是适应长期护理制度发展而设立的新职业  Golang如何使用crypto/md5生成哈希_Golang MD5哈希生成方法  如何在CSS中设置背景图像：一个全面指南  风车动漫官网首页入口登录 风车动漫在线观看正版地址  iPhone 13 mini如何清理Safari缓存_iPhone 13 mini浏览器缓存清理方法  芒果TV官网登录入口 芒果TV官方网站登录入口  CSS过渡与滚动滚动事件结合应用_scroll与transition动画  火狐浏览器无法自动更新怎么办 手动更新火狐浏览器到最新版本【解决】  Google Drive API服务器端访问指南：服务账户认证详解  《大周列国志》皇帝律令功能介绍  《爱笔思画x》涂色教程  食品生产用水只要符合国家规定的生活饮用水卫生标准就可以吗  《360浏览器》自动保存账号密码设置方法  惠普电脑BIOS界面看不懂怎么办_HP电脑BIOS功能选项解读与设置  OTT月报 | 2025年9月智能电视大数据报告  C++如何将字符串转换为大写或小写_C++ transform函数的使用技巧  漫蛙漫画官方网站使用_漫蛙manwa网页版在线入口教程  Win10如何关闭操作中心通知 Win10免打扰设置全攻略【清爽】  微信朋友圈怎么设置三天可见 微信朋友圈设置指定天数可见步骤【教程】  使用 .htaccess 正确配置 WordPress 子目录重定向与路径保留  拷贝漫画2025网页版入口 拷贝漫画官网免费看全集  网易云音乐闹钟铃声设置教程  iPhone 13 Pro Max如何设置桌面小组件_iPhone 13 Pro Max小组件添加指南  SQL聚合查询、联接与筛选：GROUP BY 子句的正确使用与常见陷阱  告别繁琐SEO！如何使用SyliusSitemap插件自动化生成网站地图，提升搜索引擎排名  VS Code快捷键when上下文子句的妙用  创建您的便携版VS Code：让配置随身携带 

 2025-11-20

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.