JavaScriptCreativeTypography
ASCII 文字波纹
悬停链接触发字符涟漪
在下方演示区域内直接操作（鼠标 / 键盘 / 滚动）。
全屏打开演示简介
鼠标划过链接时，文字像水面一样荡起一圈圈 ASCII 符号扰动，松开后恢复原文。适合书单、目录、导航列表的趣味强化。
收录日期 2026-01-23 · 来源 前端嘛 · Code Fun
技术栈
JavaScriptCanvas/DOMrequestAnimationFrame
解析
波前算法
每次 mousemove 在光标位置 push 一个 wave 对象，requestAnimationFrame 根据时间与距离把字符替换成 cfg.chars 里的符号。
布局稳定
动画开始前锁定元素 width，避免字符宽度变化导致列表抖动，是落地时很容易忽略的细节。
应用场景
- ▸博客文章目录
- ▸作品集链接列表
- ▸赛博 / 终端风个人站
完整源码
← 更多效果加载源码中…
请稍候…