? 免费波浪文字生成器在线使用！自定义波浪高度颜色渐变，一键导出高清图
今天必须给大家安利几款超惊艳的免费波浪文字生成器，它们能让你的文字瞬间拥有灵动的波纹效果，成为视觉焦点，轻松成为朋友圈、工作场景中的创意担当！无论是设计 logo、制作宣传海报还是发布社交平台帖子，这些工具都能帮你将弯曲文字融入到特定的主题中，而且操作简单，小白也能秒变设计大神！
? Picsman.ai：简单易用的曲线文字生成器
Picsman.ai 的弯曲文字生成器是一个易于使用的文本编辑器，你可以使用它创建遵循曲线或圆形路径的文本，轻松操纵文本的曲率、大小、颜色和间距等，轻松生成独特的波浪形文字。
使用方法也非常简单，只需上传需要添加弯曲文字的图片，点击添加文字，并在左边栏的文字格式中应用弯曲文字效果，你就可以自定义文字的弯曲方向、弯曲弧度、文字颜色和字体等等。调整好参数后，下载图片就完成了！你还可以注册账号，在 Picsman 中保存图片，方便后续使用。
Picsman 提供各种字体、颜色和不同的花字样式供你选择，只需点击几下，你就可以自定义整段文字的曲线程度、角度和方向，而无需单独调整每一个字。你还可以调整弯曲文本的大小、颜色、格式和透明度，从而轻松地将漂亮的弧形字体插入到你的照片和设计中。此外，它还支持制作 PNG 透明底的弯曲文字图片，将其作为实用的水印。
? BoomAi 波纹艺术字：细节处理逆天的创意工具
BoomAi 软件里的波纹艺术字功能简直就是宝藏！操作超 easy，打开 BoomAi，找到 “波纹艺术字” 入口，界面简洁得一目了然，完全没有上手难度。输入框如同一个装满创意的宝盒，你只需输入想要的文字，无论是活动主题、品牌标语，还是个性签名，都没问题。接着，软件自动识别文字，你再点击 “一键生成”，BoomAi 瞬间开启创意魔法，短短几秒，原本普通的文字就华丽蜕变成带有波纹效果的艺术字。
BoomAi 生成的波纹艺术字在细节处理上简直逆天啦！每一个笔画的波纹弧度都恰到好处，模拟真实水波的形态，有起有伏；波纹的纹理细腻清晰，仿佛能看到水的涟漪；色彩过渡自然流畅，从浅到深，毫无生硬之感，就像亲眼目睹光线在水面折射、反射。文字边缘的光影效果也处理得非常出色，模拟出水波表面的波光粼粼，立体感十足。
它的风格独特到超乎想象！在海报设计中，用 BoomAi 生成的波纹艺术字制作活动宣传海报，标题如 “夏日狂欢派对”，水波般的字体搭配清凉的蓝色系背景，瞬间营造出欢快、活泼的氛围，吸引大家的目光，让活动宣传效果事半功倍；手帐爱好者用它记录生活，比如写下 “旅行记忆”，波纹艺术字为手帐页面增添了一份灵动与趣味，使每一页都充满故事感；视频创作者在制作浪漫爱情短片、梦幻童话视频时，将波纹艺术字作为字幕，文字随着情节起伏，仿佛在诉说着动人的故事，增强视频的沉浸感，让观众更易代入情感。
? WaveFont：参数丰富的波纹文字生成器
WaveFont 是一款波纹效果文字生成器，灵感来源于 Joy Division 乐队音乐专辑《unknown pleasure》的封面。它可以一键生成水波纹效果文字，风格千变万化，设计师们千万不能错过！
只需要输入文字就能得到波纹效果，支持特殊字符，更惊喜的是还能支持自行上传 png 图片，这样就能想做什么就能做什么了！线条的组成有四种模式可以选择，纯线条，整体颜色，整体渐变，逐行渐变，每一种模式都有不同的效果哦！颜色可以随意替换，完全由你控制效果。
另外还有许多参数如：波浪高度、波浪随机数量、文字大小、文字粗细等等好玩的操作！你可以直接右键另存图片，或者在参数表的最下面选择保存格式，导出 png 或者 svg 矢量格式，也可以用录屏工具来制作动态版本。
? SVG Wave：适合网页背景的矢量波浪生成器
SVG Wave 是一个轻量级、免费且美观的 SVG 渐变波浪生成器，适用于你的下一个 UI 或网站设计。它提供了一个简单易用的界面，允许用户根据主题规范自定义和样式化波浪。
主要功能包括调整波浪层数、修改波峰和波谷数量、更改颜色、导出为 SVG 或 PNG 格式、随机化、暗模式、渐变填充和动画支持等。你可以通过简单的点击启用动画并导出为 SVG，生成的波浪图案作为网页背景，增加页面的动感和美观度，在 UI 设计中使用波浪图案，增加设计的层次感和视觉吸引力。
导出格式方面，SVG Wave 支持一键生成 SVG（矢量无损）、PNG（支持 1x-4x 分辨率）及 CSS 代码（含 Base64 编码），适配不同开发场景。生成的 SVG 文件可嵌入 <代码开始><代码结束> 和 < 代码开始 ><desc><代码结束> 标签，满足 WCAG 2.1 无障碍标准。</div><br>
<h3>? 其他实用工具推荐</h3><br>
<div>除了上述几款工具，还有一些其他的免费波浪文字生成器也值得一试。比如，万字网提供免费的超世纪新潮体波浪转换器在线转换工具，你可以使用超世纪新潮体波浪在线生成器免费设计制作好看的艺术字体，也可以免费下载超世纪新潮体波浪。58 码农网推荐的 “波浪字生成器” 网站（http://www.wave-text.com/），你可以将文字制作成波浪效果，非常适合发在社交媒体上。</div><br>
<h3>? 使用小贴士</h3><br>
<ol>
<li><strong>根据需求选择工具</strong>：不同的工具适用于不同的场景，如果你需要制作海报或手帐，BoomAi 和 WaveFont 可能更适合；如果你需要为网页设计背景，SVG Wave 是不错的选择；如果你只是想在聊天中使用特殊字体，万字网和 58 码农网推荐的工具可以满足你的需求。</li>
<li><strong>调整参数</strong>：在使用这些工具时，不要害怕尝试不同的参数，比如波浪高度、颜色渐变、文字大小等，通过调整参数可以获得不同的效果，找到最适合你的设计。</li>
<li><strong>导出格式</strong>：根据你的使用场景选择合适的导出格式，如果你需要在网页上使用，SVG 格式是不错的选择；如果你需要在图片中使用，PNG 格式更合适。</li>
<li><strong>注意版权</strong>：虽然这些工具都是免费的，但在使用时要注意版权问题，不要将生成的文字用于商业用途，除非你获得了相应的授权。</li>
</ol><br>
<h3>? 总结</h3><br>
<div>以上就是几款免费的波浪文字生成器，它们各有特色，操作简单，能够满足不同用户的需求。无论是专业设计师还是普通用户，都可以通过这些工具轻松生成独特的波浪文字效果，为你的设计增添一份灵动和创意。赶紧去试试吧，跟普通字体说拜拜，开启属于你的创意设计之旅！</div><br>
<div>该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具。</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('免费波浪文字生成器在线使用！自定义波浪高度颜色渐变，一键导出高清图', 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('免费波浪文字生成器在线使用！自定义波浪高度颜色渐变，一键导出高清图', 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/MsKz6cvRtcSH17FNBvzhi9YjtdzQwWeOqTQ0dJbUqyA.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">百度网站收录提交入口 及各平台提交入口</h3>
</div>
</div>
</a>
<a href="/ai/1KzAw96bFd81N8MpEiLvuyxMlGCicYpqJQNBAxG8fXi.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">AI 生成 PPT 模板免费平台 2025 最新：无需设计基础在线制作商务汇报幻灯片怎么选？</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('免费波浪文字生成器在线使用！自定义波浪高度颜色渐变，一键导出高清图', 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('免费波浪文字生成器在线使用！自定义波浪高度颜色渐变，一键导出高清图', 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> 430次阅读
</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> 876次阅读
</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> 948次阅读
</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> 299次阅读
</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> 298次阅读
</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> 198次阅读
</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> 264次阅读
</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/wIBU497pwUqXXlXcsNL5htfJkCb5z7Fh1o99PrPFrSg.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/121ef2c9c1e8e86c5fa9f9dba633f421.jpg"
alt="商务汇报 PPT 怎么制作？Pi - 智能演示文档多终端适配技巧分享"
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">
商务汇报 PPT 怎么制作？P </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/xX2I95Bn9DDWWWNPPr95ZS6Nq5uKn1FnbkMa8LqWRiU.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/63c03889c92da4e957491c256757739c.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/5h7aiViintc9BGbICJM1bpvEe9mzUSMkU7BGmiF3eGY.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/fc4f2d2af6e3175be01db461a0a0de0a.jpg"
alt="欧洲刑警 188 伙伴实时更新！勒索软件解密工具 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">
欧洲刑警 188 伙伴实时更新 </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/Q6aKoOn1DeAHkZ7sJjACX7M3W0Rb39TrvWaFCmxGWLe.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/93153347289ad59bd3b57e9bcbd5d0c8.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/I34ofbpBNNfasWKqDLXORZo3JoBS3IREKUeZsP44hV6.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/56617e2816ce55604ee632bdbccc8c5e.jpg"
alt="Earthworm 学习平台功能全解：自定义资料 + 模拟考试系统升级"
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">
Earthworm 学习平台功 </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>