北京
前端工程师对CSS的感情很复杂：一边骂它连选中第三个字符的选择器都没有，一边又每年都能从老属性里挖出新玩法。letter-spacing 就是这样一个被低估二十年的属性——大多数人只用它来调整标题字距，却不知道它还能当动画引擎使。
这个属性的核心机制很简单：正值在字符右侧增加间距，负值让字符框变窄甚至交叠。支持长度单位和百分比（相对于字体大小），而且可以加过渡动画。关键在于负值的表现——字母不仅会挤在一起，在从左到右的书写模式下还会整体反向位移。把这个行为跟透明色、文本对齐、溢出裁剪组合起来，三个文字动效方案就出来了。
先说最基础的叠字与展开。把 letter-spacing 设为 -1ch，颜色设为 transparent，文本就被“压扁”并隐形。ch 这个单位基于字体中“0”字符的宽度，所以 -1ch 能精准地把每个字符叠到前一个字符上方。搭配 :checked 伪类，勾选复选框时把间距拉回 0ch、颜色切回可见色，文字就从中轴线向两侧展开——如果标签设了居中对齐，字符会从中心点均匀散开；设了右对齐就从右侧弹出来。过渡时间 0.6 秒的间距变化配合 0.4 秒的颜色淡入，效果很顺。
第二个方案是切换式文字，需要两个 span 互相掩护。第一个 span 默认 letter-spacing: 0ch，完全可见；勾选后间距压缩到 -2ch 并加上 -1.5ch 的 text-indent，文字被挤成一团消失。第二个 span 初始状态是 -1ch 间距加透明色，勾选后恢复到 0ch 并显示颜色，替代第一个 span 的位置。这个切换用了 cubic-bezier(.8,-.5,.2,1.4) 的弹性曲线，文字消失和出现时带点弹簧感，比线性过渡有意思得多。外层 label 需要设 overflow: clip 防止字符溢出。
第三种变形更激进：利用负间距把整行文字缩成一个点，再通过动画炸开。原理跟前面一样，但 letter-spacing 可以推到 -3ch 甚至更低，配合 letter-spacing 和 word-spacing 的双重过渡能做出爆炸、聚合、回弹的复合效果。
这些技巧的实际价值在于零依赖——不引入JavaScript动画库、不加载额外资源，纯CSS就能完成交互反馈。对于导航菜单的状态切换、按钮的文案转换、甚至简单的加载动效都够用。当然局限也明显：中文文本因为字符宽度固定，负间距的表现不如西文可控；另外 ::nth-letter() 选择器迟迟没进标准，想精准操控第三个字母 ? 继续等吧。但用现成的 ::first-letter 搭配 letter-spacing，至少能做出首字母的独立动画。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
