老哥⦁经典AI导航
AI资讯

2025 最新 SVG Wave 教程：高度可定制波浪生成器使用技巧

2025-06-26
1681次阅读
2025 最新 SVG Wave 教程：高度可定制波浪生成器使用技巧
? 2025 最新 SVG Wave 教程：高度可定制波浪生成器使用技巧

在当下的网页设计领域，SVG 波浪元素凭借其动态美感和高度可定制性，已经成为提升页面视觉吸引力的重要手段。无论是作为背景装饰、分隔线还是交互元素，SVG 波浪都能为设计增添灵动与活力。今天咱们就来深入聊聊 2025 年最新的 SVG 波浪生成器工具，以及如何利用它们实现高度可定制的波浪效果。

?️ 主流 SVG 波浪生成器工具推荐


1. SVGWave


SVGWave 是一款轻量级的开源工具，基于 Preact 和 Tailwind CSS 构建，主打简洁高效的用户体验。它支持实时预览和参数调整，用户可以轻松修改波浪的层数、波峰数量、振幅高度等基础参数。比如，在制作网站顶部的波浪分隔线时，通过调整“层数”参数，就能快速实现多层波浪叠加的动态效果。此外，SVGWave 还新增了暗黑模式支持，方便设计师在不同环境下进行创作。

2. Simplified SVG Wave Generator


Simplified 的 SVG 波浪生成器以用户友好的界面和丰富的定制选项著称。它不仅提供了基础的波浪形态调整功能，还支持渐变填充和动画效果。用户可以通过滑动条实时调节波浪间距、偏移量，甚至为波浪添加“翻转”效果。在制作活动页面的动态背景时，利用其渐变动画选项，能轻松实现波浪颜色随时间变化的视觉冲击。

3. Wavify


Wavify 是一款基于 SVG 和 JavaScript 的库，适合需要实现复杂动画效果的开发者。它支持创建多层波浪，并提供了暂停、播放、重启等动画控制功能。比如，在音乐播放器界面中，通过与音频同步波动的波浪效果，能显著增强用户的互动体验。不过，Wavify 在移动设备上的性能表现可能会受到一定限制，需要根据具体场景进行优化。

? 高度可定制波浪效果的实现技巧


1. 参数化波形设计


  • 基础形态调整：在 SVGWave 中，通过“波峰数量”参数可以控制波浪的密集程度。数值越大，波浪的起伏越频繁，适合营造活泼的氛围；数值越小，波浪则显得更加平缓，适合简约风格的设计。
  • 动态控制：Simplified 的“偏移量”参数允许用户左右移动波浪，配合“间距”参数的调整，可以实现波浪滚动的效果。例如，在登录框背景中，设置不同的偏移量和间距，能让波浪呈现出流动的视觉感受。
  • 高级效果：Wavify 的“振幅”参数决定了波浪的垂直波动范围。在制作数据可视化图表时，通过动态调整振幅，可以直观地展示数据的变化趋势。

2. 视觉风格定制


  • 渐变填充：大多数工具都支持线性或径向渐变模式。以 Simplified 为例，用户可以选择 2-6 种颜色节点，并调节透明度，为波浪添加丰富的层次感。在品牌活动页面中，使用品牌主色调的渐变波浪，能有效提升页面的辨识度。
  • 纯色方案：SVGWave 内置了 200+ 预设色板，涵盖了 Material Design 和 Pantone 年度色等主流配色。对于新手设计师来说，直接选择预设颜色能快速生成符合设计规范的波浪效果。
  • 动画效果：Wavify 的“速度”参数可以控制波浪动画的快慢。在移动端启动屏中，设置较慢的动画速度，能让用户有足够的时间欣赏加载过渡效果。

3. 输出与兼容性优化


  • 多格式导出：SVGWave 和 Simplified 都支持导出 SVG 和 PNG 格式。SVG 格式的文件体积小且可无限缩放，适合用于网页设计；PNG 格式则适用于印刷物料，如海报和名片。
  • 无障碍支持：在导出 SVG 文件时，记得添加 </code> 和 <code><desc></code> 标签，以满足 WCAG 2.1 无障碍标准，确保视障用户也能理解波浪元素的内容。</li> <li><strong>性能优化</strong>：对于复杂的多层波浪效果，建议使用 <code><defs></code> 标签定义重复路径，减少 DOM 节点数量，提升页面加载速度。同时，启用 <code>will-change: transform</code> 属性，能显著提高动画帧率。</li> </ul><br> <h3>? 实际应用场景与案例</h3><br> <h4>1. <strong>网页设计</strong></h4><br> <ul> <li><strong>装饰元素</strong>：在产品官网中，将波浪作为分隔线，配合平滑的动画效果，能引导用户的视线自然过渡到下一个内容板块。</li> <li><strong>数据可视化</strong>：在折线图或面积图的背景中使用波浪元素，能将抽象的数据转化为更直观的视觉表现，增强信息传达效果。</li> <li><strong>404 页面</strong>：通过动态波浪动画引导用户返回首页，既能缓解用户的焦虑情绪，又能为页面增添趣味性。</li> </ul><br> <h4>2. <strong>移动端开发</strong></h4><br> <ul> <li><strong>启动屏动画</strong>：在 App 的加载页面中，使用渐变波浪效果作为过渡，能提升用户体验的流畅感。</li> <li><strong>内页背景</strong>：在设置页面或个人中心页面中，使用纯色波浪作为背景，能增加页面的层次感，避免单调。</li> </ul><br> <h4>3. <strong>广告与营销</strong></h4><br> <ul> <li><strong>活动页面</strong>：结合节日主题或促销活动，设计具有特定寓意的波浪背景，如春节的红色波浪、圣诞节的绿色波浪，能有效营造节日氛围。</li> <li><strong>社交媒体</strong>：在 Instagram 或 Facebook 的广告海报中，使用动态波浪元素，能吸引用户的注意力，提高点击率。</li> </ul><br> <h3>? SEO 优化策略</h3><br> <h4>1. <strong>关键词自然融入</strong></h4><br> <div>在文章标题、二级标题和中自然融入“SVG 波浪生成器”“高度可定制”“动态波浪效果”等关键词，但要避免堆砌。例如，在介绍工具时，可以这样描述：“SVGWave 作为一款高度可定制的 SVG 波浪生成器，能满足不同场景下的设计需求。”</div><br> <h4>2. <strong>图片优化</strong></h4><br> <ul> <li><strong>命名规范</strong>：将导出的 SVG 或 PNG 文件命名为“svg-wave-generator-tutorial.png”，包含核心关键词。</li> <li><strong>ALT 属性</strong>：为图片添加描述性的 ALT 文本，如“2025 最新 SVG 波浪生成器工具界面截图”，帮助搜索引擎理解图片内容。</li> <li><strong>结构化数据</strong>：使用 Schema Markup 标记图片内容，如产品类型、价格等信息，提升图片在搜索结果中的可见性。</li> </ul><br> <h4>3. <strong>内容结构优化</strong></h4><br> <ul> <li><strong>标题标签</strong>：在文章开头使用 <code><h1></code> 标签包裹主标题，二级标题使用 <code><h2></code> 标签，确保搜索引擎能够正确识别内容层次。</li> <li><strong>段落清晰</strong>：每个二级标题下的内容控制在 2-8 个自然段，使用加粗突出重点，方便读者快速抓取关键信息。</li> <li><strong>内部链接</strong>：在介绍不同工具时，适当提及其他相关教程或资源，如“关于 SVG 波浪的动画实现，可参考《SVG+JS 驱动的波浪动画教程》”，提升页面的关联性。</li> </ul><br> <h3>? 注意事项与最佳实践</h3><br> <ol> <li><strong>避免过度优化</strong>：虽然关键词很重要，但要确保内容的可读性。生硬地堆砌关键词不仅会影响用户体验，还可能被搜索引擎判定为作弊。</li> <li><strong>测试兼容性</strong>：在不同浏览器和设备上测试生成的波浪效果，确保其在 Chrome、Firefox、Safari 等主流浏览器以及 iOS 和 Android 设备上都能正常显示。</li> <li><strong>保护版权</strong>：如果使用开源工具生成的 SVG 文件，需遵守其开源协议，避免商业滥用。对于商业项目，建议选择支持免费商用的工具或购买版权。</li> </ol><br> <div>通过以上介绍，相信大家对 2025 年最新的 SVG 波浪生成器工具有了更深入的了解，也掌握了高度可定制波浪效果的实现技巧。无论是网页设计、移动端开发还是广告营销，SVG 波浪都能为你的作品增添独特的魅力。赶快动手试试吧，让你的设计在 2025 年脱颖而出！</div><br> <div><strong>该文章由 dudu123.com 嘟嘟 AI 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具</strong></div><br> </div> </div> <!-- 标签和分享 --> <div class="flex flex-col md:flex-row justify-between items-start md:items-center pt-8 mt-8 border-t border-gray-200 dark:border-gray-700"> <div class="mb-4 md:mb-0"> <span class="text-gray-700 dark:text-gray-300 mr-2">标签：</span> <span class="news-tag bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full text-sm">AI资讯</span> </div> <div class="flex space-x-3"> <span class="text-gray-700 dark:text-gray-300">分享：</span> <a href="javascript:void(0)" onclick="shareToWeChat()" class="social-share w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400"> <i class="fa-brands fa-weixin"></i> </a> <a href="javascript:void(0)" onclick="shareToWeibo('2025 最新 SVG Wave 教程：高度可定制波浪生成器使用技巧', window.location.href)" class="social-share w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400"> <i class="fa-brands fa-weibo"></i> </a> <a href="javascript:void(0)" onclick="shareToTwitter('2025 最新 SVG Wave 教程：高度可定制波浪生成器使用技巧', window.location.href)" class="social-share w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white"> <i class="fa-brands fa-twitter"></i> </a> <a href="javascript:void(0)" onclick="copyLink()" class="social-share w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center text-green-600 dark:text-green-400"> <i class="fa-solid fa-link"></i> </a> </div> </div> </div> <!-- 上一篇/下一篇 --> <div class="flex flex-col md:flex-row justify-between gap-6 mb-8"> <a href="/ai/Sg4sDye6tmqWu52UtSXOumoJO6WA6ADcATclzRKMqNi.html" class="card group flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-5"> <div class="flex items-center"> <i class="fa-solid fa-arrow-left text-gray-500 dark:text-gray-400 mr-3 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i> <div> <p class="text-gray-500 dark:text-gray-400 text-sm mb-1">上一篇</p> <h3 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">2025 升级 AI 缩略图工具：MagicThumbnails 精准匹配内容，多平台兼容提升社交媒体点击率！</h3> </div> </div> </a> <a href="/ai/LcU3PkzwqXKHHSvHvYYbzgk3fG0gBe6fuNvbp7m56FW.html" class="card group flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-5"> <div class="flex items-center text-right flex-row-reverse"> <i class="fa-solid fa-arrow-right text-gray-500 dark:text-gray-400 ml-3 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i> <div> <p class="text-gray-500 dark:text-gray-400 text-sm mb-1">下一篇</p> <h3 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">MagicThumbnails 智能生成专业缩略图：多平台兼容 + 自定义模板，无需设计经验高效提升！</h3> </div> </div> </a> </div> <!-- 评论区 --> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-bold text-gray-800 dark:text-white">用户评论 (0)</h3> <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition flex items-center"> <i class="fa-solid fa-pen mr-2"></i> 发表评论 </button> </div> <div class="space-y-6"> <!-- 暂无评论 --> <div class="text-center py-8"> <i class="fa-regular fa-comments text-5xl text-gray-300 dark:text-gray-600 mb-4"></i> <p class="text-gray-500 dark:text-gray-400">暂无评论，快来发表第一条评论吧！</p> </div> </div> </div> </div> <!-- 右侧边栏 --> <div class="w-full lg:w-1/4"> <!-- 网站信息 --> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6 mb-8"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mr-4"> <i class="fa-solid fa-robot text-white text-xl"></i> </div> <div> <h3 class="font-bold text-gray-800 dark:text-white">AI导航</h3> <p class="text-gray-600 dark:text-gray-400 text-sm">AI资源与工具导航</p> </div> </div> <p class="text-gray-700 dark:text-gray-300 text-sm"> 汇聚全球最优质的人工智能工具与资源，助力您的创新之旅。关注前沿AI技术发展与实际应用案例。 </p> <div class="flex space-x-3 mt-4"> <a href="javascript:void(0)" onclick="shareToTwitter('2025 最新 SVG Wave 教程：高度可定制波浪生成器使用技巧', window.location.href)" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400"> <i class="fa-brands fa-twitter"></i> </a> <a href="javascript:void(0)" onclick="shareToWeChat()" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400"> <i class="fa-brands fa-weixin"></i> </a> <a href="javascript:void(0)" onclick="shareToWeibo('2025 最新 SVG Wave 教程：高度可定制波浪生成器使用技巧', window.location.href)" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400"> <i class="fa-brands fa-weibo"></i> </a> </div> </div> <!-- 热门资讯排行榜 --> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6 mb-8"> <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">热门资讯榜</h3> <div class="space-y-4"> <!-- 排行项目 1 --> <a href="/ai/R1cOzHhluUQMHHOSZZRV3YzrrtHEHNQNv2fIK3KNG9a.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 1 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> Evolup 行业专家资源整合： </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 766次阅读 </p> </div> </a> <!-- 排行项目 2 --> <a href="/ai/32WbG8ITGqPbPluBqz6s7dFCA76TnZhrknRHyyIlFZm.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-400 to-gray-500 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 2 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 机器学习赋能 MAIGON，企业 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 294次阅读 </p> </div> </a> <!-- 排行项目 3 --> <a href="/ai/eeCDVzUO4GsY5PVfzgny5z2OMlcsK1agiw3LhDURYzS.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-700 to-amber-800 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 3 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 丹尼斯西蒙 1981 年中国影像 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 346次阅读 </p> </div> </a> <!-- 排行项目 4 --> <a href="/ai/gjylUxSK28i8OLoyUc5O4IDZVbppj0hS8FURCUHlJaM.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 4 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 立即体验 2025 免费在线乐器 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 677次阅读 </p> </div> </a> <!-- 排行项目 5 --> <a href="/ai/AFzIfhsePTn0TONAlefhj7AN0RnSG9JkHkGSC2IzbCg.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 5 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> Placeit 值得入手吗？超 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 633次阅读 </p> </div> </a> <!-- 排行项目 6 --> <a href="/ai/18IvEUzg30wIkLWWyo1xy6xxwnyYMelvot1fNYN53FS.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 6 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 教育学习必备：无水印视频素材下载 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 438次阅读 </p> </div> </a> <!-- 排行项目 7 --> <a href="/ai/uTF3uf8gG7u7J995oWg7Obf2voGu0Uo6lXedAqVqSqQ.html" class="flex items-center group"> <div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition"> 7 </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 真人表演转逼真 CG 动画怎么做 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1"> <i class="fa-solid fa-eye mr-1"></i> 968次阅读 </p> </div> </a> <!-- 查看全部按钮 --> <!-- <div class="pt-4"> <a href="news.php" class="text-blue-600 dark:text-blue-400 hover:underline text-sm flex items-center"> 查看全部热门资讯 <i class="fa-solid fa-arrow-right ml-2 text-xs"></i> </a> </div> --> </div> </div> <!-- 推荐资讯 --> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6"> <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">推荐阅读</h3> <div class="space-y-5"> <!-- 推荐项目 --> <a href="/ai/eeCDVzUO4GsY5PVfzgny5z2OMlcsK1agiw3LhDURYzS.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/06/3f8de8f43e83469ff9a88edb1cd8dd71.jpg" alt="丹尼斯西蒙 1981 年中国影像怎么看？改革开放初期城市街景高清资源分享" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 丹尼斯西蒙 1981 年中国影 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> <!-- 推荐项目 --> <a href="/ai/gjylUxSK28i8OLoyUc5O4IDZVbppj0hS8FURCUHlJaM.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/06/b9265c9cf084f7008471a4b5cd5f7e9a.jpg" alt="立即体验 2025 免费在线乐器模拟器！钢琴鼓机合成器交互式演奏工具推荐" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 立即体验 2025 免费在线乐 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> <!-- 推荐项目 --> <a href="/ai/AFzIfhsePTn0TONAlefhj7AN0RnSG9JkHkGSC2IzbCg.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/06/bd650a06a904ea5d1071d552fd355f43.jpg" alt="Placeit 值得入手吗？超 10 万模板 + 一键生成，新手设计神器评测" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> Placeit 值得入手吗？超 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> <!-- 推荐项目 --> <a href="/ai/18IvEUzg30wIkLWWyo1xy6xxwnyYMelvot1fNYN53FS.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/07/bd93bb2bef58754572f7e7f297a68047.jpg" alt="教育学习必备：无水印视频素材下载，支持批量处理和高清格式转换工具！" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 教育学习必备：无水印视频素材下 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> <!-- 推荐项目 --> <a href="/ai/uTF3uf8gG7u7J995oWg7Obf2voGu0Uo6lXedAqVqSqQ.html" class="group flex items-start"> <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4"> <img src="https://cdn.yyp.net/wp-content/uploads/2025/07/429790ecb6daf85f0f66639aadb79da2.jpg" alt="真人表演转逼真 CG 动画怎么做？Wonder Dynamics 实时渲染技术轻松实现" class="w-full h-full object-cover group-hover:scale-105 transition"> </div> <div> <h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2"> 真人表演转逼真 CG 动画怎么 </h4> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1"> <i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p> </div> </a> </div> </div> </div> </div> </main> <!-- 页脚 --> <footer class="bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 mt-16 py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <div class="flex items-center mb-4"> <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center"> <i class="fa-solid fa-robot text-white text-xl"></i> </div> <span class="text-xl font-bold text-gray-800 dark:text-white ml-2">AI导航</span> </div> <p class="text-gray-600 dark:text-gray-400 text-sm"> 汇聚全球最优质的人工智能工具与资源，助力您的创新之旅。 </p> </div> <div> <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">快速链接</h3> <ul class="space-y-2"> <li><a href="/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">首页</a></li> <li><a href="/hotsites/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">热门工具</a></li> <li><a href="/newsites/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">最新资源</a></li> <li><a href="/ai/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">Ai资讯</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">热门分类</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">对话AI</a></li> <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">图像生成</a></li> <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">编程开发</a></li> <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">视频处理</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">订阅更新</h3> <p class="text-gray-600 dark:text-gray-400 text-sm mb-4"> 获取最新AI工具和资源推荐 </p> <div class="flex"> <input type="email" placeholder="您的邮箱地址" class="flex-1 px-4 py-2 rounded-l-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500" > <button class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> <i class="fa-solid fa-paper-plane"></i> </button> </div> </div> </div> <div class="border-t border-gray-200 dark:border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-500 dark:text-gray-500 text-sm"> © 2023 AI导航. 保留所有权利。 </p> <p class="text-gray-500 dark:text-gray-500 text-sm"> <a href="http://beian.miit.gov.cn/" rel="nofollow">ICP备案：豫B2-20110008-14</a> </p> <div class="flex space-x-4 mt-4 md:mt-0"> <a href="javascript:void(0)" onclick="shareToWeChat()" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transitio"> <i class="fa-brands fa-weixin"></i> </a> <a href="javascript:void(0)" onclick="shareToWeibo('AI导航', window.location.href)" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transitio"> <i class="fa-brands fa-weibo"></i> </a> <a href="javascript:void(0)" onclick="shareToTwitter('AI导航', window.location.href)" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition"> <i class="fa-brands fa-twitter"></i> </a> </div> </div> </div> </footer> <script src="/staticai/qrcode.min.js"></script> <script> // 分享功能 function shareToWeChat() { // 获取当前页面URL const url = window.location.href; // 创建二维码容器 const qrModal = document.createElement('div'); qrModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'; const qrContainer = document.createElement('div'); qrContainer.className = 'bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg max-w-sm w-full relative'; // 创建标题 const title = document.createElement('h3'); title.className = 'text-xl font-bold text-gray-800 dark:text-white mb-4 text-center'; title.textContent = '微信扫码分享'; // 创建关闭按钮 const closeBtn = document.createElement('button'); closeBtn.className = 'absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'; closeBtn.innerHTML = '<i class="fa-solid fa-times"></i>'; closeBtn.onclick = () => document.body.removeChild(qrModal); // 创建QR码容器 const qrBox = document.createElement('div'); qrBox.className = 'flex justify-center items-center mb-4'; // 提示文字 const hint = document.createElement('p'); hint.className = 'text-center text-gray-600 dark:text-gray-400 text-sm'; hint.textContent = '请使用微信"扫一扫"扫描上方二维码'; // 组装DOM qrContainer.appendChild(title); qrContainer.appendChild(qrBox); qrContainer.appendChild(hint); qrContainer.appendChild(closeBtn); qrModal.appendChild(qrContainer); document.body.appendChild(qrModal); // 检查QRCode库是否已加载 if (typeof QRCode === 'function') { // 使用QRCode.js生成二维码 try { new QRCode(qrBox, { text: url, width: 200, height: 200, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); } catch (e) { // 如果生成二维码失败，回退到使用图片形式 qrBox.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}" width="200" height="200" alt="二维码">`; } } else { // 如果QRCode库未加载，使用外部API生成二维码图片 qrBox.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}" width="200" height="200" alt="二维码">`; } // 点击模态框背景关闭 qrModal.addEventListener('click', function(e) { if (e.target === qrModal) { document.body.removeChild(qrModal); } }); } function shareToWeibo(title, url) { const weiboUrl = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`; window.open(weiboUrl, '_blank', 'width=700,height=500'); } function shareToTwitter(title, url) { const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`; window.open(twitterUrl, '_blank', 'width=700,height=500'); } // 深色模式切换 const themeToggle = document.getElementById('theme-toggle'); const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); // 初始化主题 if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && prefersDarkScheme.matches)) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } themeToggle.addEventListener('click', () => { if (document.documentElement.classList.contains('dark')) { document.documentElement.classList.remove('dark'); localStorage.setItem('theme', 'light'); } else { document.documentElement.classList.add('dark'); localStorage.setItem('theme', 'dark'); } }); // 移动端菜单切换 const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileNav = document.getElementById('mobile-nav'); mobileMenuButton.addEventListener('click', () => { mobileNav.classList.toggle('open'); }); // 处理系统主题变化 prefersDarkScheme.addEventListener('change', e => { if (!localStorage.getItem('theme')) { if (e.matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } } }); </script> </body> </html> <script> function copyLink() { const url = window.location.href; // 使用现代API复制到剪贴板 if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(url) .then(() => { showNotification('链接已复制到剪贴板'); }) .catch(err => { console.error('无法复制链接: ', err); fallbackCopyLink(url); }); } else { fallbackCopyLink(url); } } function fallbackCopyLink(text) { // 创建临时输入框 const input = document.createElement('input'); input.style.position = 'fixed'; input.style.opacity = 0; input.value = text; document.body.appendChild(input); input.select(); // 尝试复制 try { const successful = document.execCommand('copy'); if (successful) { showNotification('链接已复制到剪贴板'); } else { showNotification('复制失败，请手动复制链接', 'error'); } } catch (err) { console.error('无法复制链接: ', err); showNotification('复制失败，请手动复制链接', 'error'); } // 移除临时元素 document.body.removeChild(input); } function showNotification(message, type = 'success') { // 创建通知元素 const notification = document.createElement('div'); notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${type === 'success' ? 'bg-green-500' : 'bg-red-500'} transition-all duration-300 transform translate-y-full opacity-0`; notification.textContent = message; document.body.appendChild(notification); // 显示通知 setTimeout(() => { notification.style.transform = 'translateY(0)'; notification.style.opacity = '1'; }, 10); // 3秒后隐藏通知 setTimeout(() => { notification.style.transform = 'translateY(full)'; notification.style.opacity = '0'; // 动画结束后移除元素 setTimeout(() => { document.body.removeChild(notification); }, 300); }, 3000); } </script> </body> </html>