尧图网页设计 
这套东西我前后整理了一个通宵说实话不是为了凑数。做前端这些年标题类、banner 类、活动页里的文字特效需求几乎没有断过——运营要闪一点产品要高级一点老板要像大厂那样。每次都要翻聊天记录、翻本地旧项目效率低得离谱。所以这回干脆把散落在各个项目里的写法全部抽出来统一变量、统一命名、统一降级策略最后落在 48 个能直接抄的案例上。下文里说的文字特效指的就是用纯 CSS个别地方补几行 JS 兜底对文本本身做视觉加工——渐变填充、描边、发光、位移、遮罩、交互反馈这一类不涉及任何框架和构建工具复制粘贴到任意 HTML 页面就能跑。适合刚学完 CSS 基础想找练手素材的同学也适合手上有活动页要交付、没时间从零调参数的老手。下面我按分类思路、底层原理、逐个实现、工程化处理、排查经验的顺序讲参数为什么这么取、坑在哪都会说清楚。1. 48 个特效的分组逻辑与选型考量1.1 文字特效在真实项目里到底解决什么问题先说一个我经常被问到的判断文字特效不是装饰它是信息层级的一种表达手段。页面里一个普通 h1 和一段正文视觉权重本来就该拉开而拉开权重最省成本的方式就是把标题做点处理。实测下来落到具体场景无非这么几类官网首屏主标题需要一个持续但不刺眼的动效把用户视线钉在最上方 3 秒活动页的倒计时、价格、优惠码需要高对比的强调最好还能闪一下数据看板里的大数字需要滚动计数让变化这件事被看见空状态页、404 页、加载文案需要一个不让人焦虑的小动效压住等待感还有交互反馈——按钮悬停、链接下划线这些都属于文字特效的范畴。反过来说哪些地方千万别用我心里也有一条线。正文段落、列表项、表格内容、表单标签上面挂动效阅读成本直接翻倍用户会不自觉地被正在动的那个元素吸走注意力然后就找不到自己刚才读到哪了。我自己的原则是一屏之内同时在动的文字元素不超过两个且动效周期不短于 2 秒否则页面看起来像菜市场。这个判断标准比任何设计规范都好用因为它直接对应到人的视觉系统带宽。还有一点值得提前说文字特效的成本被严重低估了。写一个渐变字 3 分钟把它调成在深色背景和浅色背景都好看、在小屏和大屏都不糊、在低端安卓机上不掉帧可能要 2 小时。所以后文我会花不少篇幅讲变量化和降级那才是真正省时间的地方。1.2 六组分类清单48 个特效的全貌我把这 48 个按实现手法分成六组每组 8 个。分组不是为了好看而是因为同组内的技术骨架是一样的学会一个基本能推出一整组。分组核心技术手段包含的特效一、静态材质背景裁切、描边、多层阴影渐变填充字、金属拉丝字、粗细描边字、镂空描边字、凸版内阴影字、长投影字、立体挤出字、剪影镂空字二、光影动效text-shadow 堆叠、遮罩扫光霓虹呼吸字、高光扫过字、冷光晕染字、星点闪烁字、边缘流光字、烛火摇曳字、电流脉冲字、光斑扩散字三、位移形变transform 与逐字拆分波浪起伏字、逐字弹跳字、3D 翻转字、立体旋转字、字母挤压字、坠落回弹字、心跳缩放字、抖动毛刺字四、划线装饰伪元素、背景渐变划线生长下划线、双线滑入下划线、删除线动画、波浪下划线、段落分割线、荧光笔涂抹、括号包裹、引号角标五、遮罩填充background-clip 系列图片填充字、视频填充字、鼠标跟随背景字、镂空露出背景字、双色叠影字、半调网点字、条纹滚动字、纹理叠加字六、交互场景事件驱动 过渡动画点击涟漪字、悬停扫描线、数字滚动计数、Tab 悬停指示条、霓虹按钮文字、打字机标签页、进入视口逐字显现、鼠标跟随光点看到这张表你会发现一个规律第一组和第二组吃的是绘制能力第三组吃的是变换能力第四组和第五组吃的是伪元素加裁切第六组吃的是状态与事件。把这四种能力拆开练48 个特效里真正需要重新思考的其实不到 10 个剩下的都是参数换皮。1.3 为什么按这个顺序学而不是从最炫的开始新手最容易犯的错是从故障风、3D 翻转这些视觉冲击最强的开始学结果一上来就要同时处理伪元素定位、关键帧、混合模式、性能四个问题卡住之后容易放弃。我的建议顺序是静态材质 → 划线装饰 → 光影动效 → 遮罩填充 → 位移形变 → 交互场景。理由很实在。静态材质阶段你只需要理解颜色从哪来、边界在哪这是后面所有效果的地基划线装饰阶段你学会伪元素和定位这是第二重要的基本功到了光影阶段才引入动画时间和缓动函数此时你已经有了稳定的静态效果作为参照调参不容易失控遮罩填充阶段接触 background-clip跟第一组天然衔接位移形变最难的地方是文本必须拆成单字涉及 DOM 结构改造放到后面处理交互场景需要配合 JS 事件放在最后最合适。提示如果你只是临时要做个活动页没必要全学。直接跳到第 3 节对应的实现把参数里的颜色变量替成自己的品牌色就能交付了。2. 写特效前必须打牢的底层原理2.1 文本渲染的三个层级字体度量、行盒与定位很多人调文字特效时遇到光晕被切掉一半描边上下不对称第一反应是调 padding结果按下葫芦浮起瓢。根子在于没搞清楚浏览器渲染文本时的三层结构。最内层是字体度量也就是字体文件里自带的 em 盒、ascent基线以上高度、descent基线以下高度。这些数字是字体设计师定死的你改不了。中间层是行盒由line-height决定当行高小于字体度量时字形不会缩小而是溢出并被相邻行或容器裁掉。最外层才是元素盒模型由 width、height、padding、border 决定。文字特效里的发光、描边、位移都发生在最内层但裁剪发生在中间层和最外层。所以发光被切这类问题的正确解法不是加 padding而是排查三处容器有没有overflow: hidden行盒够不够高line-height是不是小于 1.2父级有没有contain: paint之类的裁剪。我通常的做法是给特效文字单独套一个带padding: .2em的包裹层把裁剪边界往外推逻辑上是让外层盒子比字形大一圈而不是去动行高。这个思路能解决 80% 的特效被切问题。2.2 伪元素才是文字特效的真正主力48 个特效里超过一半依赖::before和::after。原因很简单一个 HTML 文本节点在视觉上只能有一种填充、一种描边、一种阴影但特效经常需要两层同样文字、错位叠加的效果——故障风的红蓝分离、双色叠影、删除线、下划线全都是靠伪元素复制一份再偏移。用伪元素有几个硬性规则必须记住。第一content属性不能省哪怕是空字符串否则伪元素不生成第二伪元素默认是行内元素要给它定宽高、做绝对定位必须写display: block或position: absolute第三伪元素不能用在替换元素上input、img、textarea上写::before是无效的这也是为什么按钮的涟漪效果通常得套一层span或者直接改结构。还有一个细节常被忽略伪元素如果要复制文字内容靠content: attr(data-text)从父元素的>h1 classglitch>.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; }2.3 background-clip 与 text-shadow 的坐标系差异这两个属性是文字特效的两大支柱但它们的坐标系完全不一样混用的时候特别容易出错。background-clip: text的工作方式是把文字的字形当作裁剪路径只保留背景落在字形内部的部分。这里的关键是背景本身的定位坐标系是元素的盒子不是字形。也就是说你写linear-gradient(90deg, red, blue)渐变的起点在盒子左边、终点在盒子右边而不是从第一个字的左边到最后一个字的右边。如果你给元素加了左右 padding渐变的可见范围就会偏移看起来像是渐变没铺满。解决办法一般是把 padding 移到外层包裹元素上或者用background-origin调整参考框。text-shadow则完全是另一套它的定位参考是每一个字形自身偏移量相对字形原点计算模糊半径是以高斯模糊的方式向外扩散。所以text-shadow: 0 0 20px #0ff会在每个字周围形成一圈 20px 的光晕长文本里相邻字的光晕会互相叠加中间区域会明显更亮。这就是霓虹字在长句上糊成一片的真正原因跟层数太多是两回事——短文本能用的参数长文本必须调小。理解了这两套坐标系很多为什么这个参数在这个场景管用、换个场景就废了的困惑就自然解开了。2.4 选择器策略与样式引入方式对特效维护的影响特效写多了样式表的组织方式会变成主要矛盾。我踩过的坑主要集中在选择器和引入方式两点上。选择器方面类选择器.fx-neon优先级是 0-1-0ID 选择器#title是 1-0-0。特效类我会一律用类选择器而且前缀统一原因是特效经常需要叠加——一个字既要渐变又要悬停发光这时候两个类一起挂优先级相同、靠书写顺序决定胜负比 ID 混在里面好控制得多。:not()用得也不少比如.fx-text:not(.fx-no-anim)用来给部分元素关掉动效。至于通配符*除非做全局 reset我不建议在特效里用它的匹配范围太大在长列表页面上会增加样式计算的开销而且容易把你辛苦调好的text-shadow一并覆盖掉。引入方式这边外链 CSS 和内联style的差别在特效场景里会被放大特效样式动辄几百行全塞进 HTML 里会让首屏文档体积膨胀但完全外链又可能出现先看到无样式的纯文字、再突然变形的闪烁。我现在的做法是把跟首屏主标题相关的十几个属性用内联style写在文档头部俗称关键 CSS其余特效留在外链文件里。至于import它是串行加载的会拖慢渲染特效样式表里基本不用。3. 六组特效的完整实现与关键参数3.1 渐变填充与金属质感让文字有材质先说最常用也最容易被低估的渐变字。核心三行是背景、裁切、透明色缺一不可.grad-text { background: linear-gradient(90deg, #ff5f6d, #ffc371, #47cf73, #4facfe, #ff5f6d); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-flow 8s linear infinite; } keyframes grad-flow { to { background-position: -300% 0; } }这里有两个参数值得掰开讲。第一为什么第一个色标和最后一个色标是同一个颜色因为要让循环无缝。动画从background-position: 0走到-300%起点位置的背景和终点位置的背景必须完全一致否则每 8 秒会看到一次跳变。第二background-size: 300%和位移量-300%必须对应同一个值它是一份完整渐变的宽度。想让流动更快缩短时长不要改位移量——改位移量会破坏无缝。金属拉丝字的思路完全不同它靠的是高频窄条纹叠加用重复线性渐变做出拉丝纹路再加一层竖向的明暗渐变模拟反光.metal-text { background: linear-gradient(180deg, #fff 0%, #b8b8b8 45%, #6e6e6e 52%, #e8e8e8 60%, #fff 100%), repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.12) 2px 4px); background-blend-mode: overlay; -webkit-background-clip: text; background-clip: text; color: transparent; }repeating-linear-gradient的 2px/4px 周期决定了拉丝的细腻程度在 1 倍屏上 2px 还能看在 2 倍屏上就偏粗了所以我会用0.06em这类相对单位让条纹随字号缩放。另外金属字建议搭配font-weight: 800以上的粗体细体字笔画太窄条纹根本铺不开看起来就是一团灰。注意background-clip: text必须保留-webkit-前缀版本因为目前主流浏览器仍然只认带前缀的写法。同时color: transparent一定要写忘了它你会得到一个纯黑背景块——这是新手最常见的翻车点。3.2 霓虹呼吸与高光扫过多层阴影的取参逻辑霓虹字的原理是同一个颜色的多层阴影模糊半径逐级翻倍、透明度逐级衰减模拟真实光源从中心向外扩散的衰减曲线。.neon-text { color: #f6fbff; text-shadow: 0 0 2px #fff, 0 0 6px #7af, 0 0 14px #2af, 0 0 30px #06f, 0 0 60px #03c; animation: neon-breathe 2.6s ease-in-out infinite alternate; } keyframes neon-breathe { from { opacity: .82; } to { opacity: 1; } }半径的取值规律我实测下来是这样相邻两层的半径比在 2 到 2.5 之间最自然比 2 小会看出明显的圈层感比 3 大会出现断层总层数控制在 5 层以内超过之后边缘会糊成一坨灰白反而失去霓虹的通透感。呼吸动画不要用text-shadow做关键帧开销大且不平滑改成动opacity或者动最外层的一层阴影既省性能视觉上也够用。高光扫过Shimmer是另一条路线它不靠阴影靠的是一个窄白条在文字上横向掠过本质还是背景裁切.shimmer-text { background: linear-gradient(100deg, #8a94a6 30%, #ffffff 45%, #ffffff 55%, #8a94a6 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 3.2s ease-in-out infinite; } keyframes shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }中间两个 45% 和 55% 的白点构成高光宽度占整体 10%这个比例是视觉上最像金属反光的。想更锐利就收窄到 48%/52%想更柔和就放宽到 35%/65%。3.3 打字机与逐字入场steps 与 ch 单位的配合打字机效果纯 CSS 也能做但有两个硬性前提很多人不知道所以就做不出来。.typewriter { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; overflow: hidden; border-right: 2px solid currentColor; width: 0; animation: typing 2.4s steps(12) forwards, caret .8s step-end infinite; } keyframes typing { to { width: 12ch; } } keyframes caret { 50% { border-right-color: transparent; } }第一个前提是等宽字体。宽度用ch单位1ch 等于当前字体下数字 0 的宽度只有在等宽字体里每个字符宽度才相同动画才走得均匀。第二个前提是white-space: nowrap否则宽度增长的过程中文字会换行效果全乱。steps(12)里的 12 是字符数写错了会在末尾多停或少停一拍。但 CSS 版有个致命缺陷文案一改步骤数、宽度、时长三个参数要同步改忘记一个就露馅。所以在真实项目里我基本都用 JS 版逐字追加function typewriter(el, text, speed 90) { el.textContent ; let i 0; const timer setInterval(() { el.textContent text[i] || ; if (i text.length) clearInterval(timer); }, speed); return () clearInterval(timer); }节奏上有个小经验标点符号处可以多停 150ms 左右读起来更像真人在打字。纯匀速会显得机械。3.4 故障风与抖动clip-path 与双伪元素的错位故障风Glitch看着唬人拆开就三层底层是正常文字上面两个伪元素各复制一份用clip-path切出水平条带再各自做位移。.glitch { position: relative; color: #eaeaea; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; background: inherit; } .glitch::before { color: #ff2d55; clip-path: inset(20% 0 60% 0); animation: glitch-a 2.4s steps(2, end) infinite; } .glitch::after { color: #00d1ff; clip-path: inset(65% 0 15% 0); animation: glitch-b 1.8s steps(2, end) infinite; } keyframes glitch-a { 0%, 92%, 100% { transform: translate(0, 0); } 94% { transform: translate(-3px, -2px); } 97% { transform: translate(2px, 1px); } }关键参数是clip-path: inset(上 右 下 左)它决定条带的位置和高度。两个伪元素要覆盖不同的高度区间且不要刚好互补中间留一点重叠区域视觉上更自然。动画时长用steps(2, end)是为了让位移瞬间发生而非平滑过渡——故障感来自突兀。抖动毛刺字本质是同一套只是把clip-path去掉改成随机的translate加极短时长配合transform: skewX()做横向剪切。这里要提醒一句抖动的位移量不要超过 3px超过之后文字识别度断崖式下降用户会以为是页面渲染坏了。3.5 划线装饰下划线生长、删除线动画与段落分割线text-decoration有个让人抓狂的限制它的颜色、粗细、偏移可以过渡但线条的长度和位置无法用 transition 动画化。所以所有下划线从中间长出来删除线从左扫到右的效果全都要用伪元素或者背景渐变模拟。伪元素版本适合单行文字.link-underline { position: relative; } .link-underline::after { content: ; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .link-underline:hover::after { transform: scaleX(1); }这里用transform: scaleX()而不是动width原因是 transform 走合成层不触发重排重绘长列表里差别明显。transform-origin决定生长方向left center是从左往右改成center就是从中间向两侧展开。跨行文字就不行了伪元素只有一个跨行会断成奇怪的样子。跨行场景我改用背景渐变方案.link-multiline { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size .3s cubic-bezier(.4, 0, .2, 1); } .link-multiline:hover { background-size: 100% 2px; }背景会跟着每一行重复绘制所以换行也自然。代价是它面向所有行同时生长没法做到逐行依次出现。删除线动画同理把bottom: -2px改成top: 50%高度用小值就得到一条从左侧扫过文字中线的删除线。段落分割线则是另一个思路用 flex 让文字居中、两侧自动填充横线.divider { display: flex; align-items: center; gap: .8em; color: #8a94a6; } .divider::before, .divider::after { content: ; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); }两侧用渐变而不是纯色端点自然淡出比生硬的实线好看很多。3.6 点击涟漪与悬停扫描交互态的文字反馈文字上的涟漪效果跟按钮上的做法一样难点在于涟漪要从点击位置扩散而不是从元素中心。纯 CSS 做不到读取点击坐标必须补几行 JS。document.querySelectorAll(.fx-ripple).forEach(el { el.addEventListener(pointerdown, e { const rect el.getBoundingClientRect(); const span document.createElement(span); const size Math.max(rect.width, rect.height) * 2; span.className ripple; span.style.width span.style.height size px; span.style.left (e.clientX - rect.left - size / 2) px; span.style.top (e.clientY - rect.top - size / 2) px; el.appendChild(span); span.addEventListener(animationend, () span.remove()); }); });.fx-ripple { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; } .ripple { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%); transform: scale(0); pointer-events: none; animation: ripple-out .6s ease-out forwards; } keyframes ripple-out { to { transform: scale(1); opacity: 0; } }尺寸取长宽较大值的 2 倍是保证无论点在哪里涟漪的圆形都能完全覆盖元素。-webkit-tap-highlight-color: transparent这一行是为了压掉移动端点击时系统自带的灰色高亮块不加的话两个反馈会打架。动画结束后必须把节点删掉否则连点几十次会堆一堆 DOM长页面上能明显感到卡顿。悬停扫描线是纯 CSS一个线性渐变横条在 hover 时纵向穿过文字.scan-text { background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%); background-size: 100% 300%; background-position: 0 -150%; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position .6s ease; } .scan-text:hover { background-position: 0 150%; }这里背景的移动范围要大于background-size才能保证扫描条完全从上方进入、从下方离开中间不停留。3.7 3D 翻转与滚动显现透视、计数与视口观察3D 翻转字有两个必须配齐的属性缺一个就是平的。父级要有perspective一般是字号的 4 到 8 倍元素自身要有backface-visibility: hidden否则翻到背面会看到镜像的文字。.flip-wrap { perspective: 600px; display: inline-block; } .flip-char { display: inline-block; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } .flip-wrap:hover .flip-char { transform: rotateX(-90deg); }cubic-bezier(.34, 1.56, .64, 1)这个缓动函数里第二个参数大于 1会产生轻微过冲也就是翻过去之后回弹一下手感比线性好得多。这个函数我在 48 个特效里用了至少 15 次属于万能弹簧曲线。逐字拆分入场需要改 HTML 结构把文字拆成单个span然后用 CSS 变量控制延迟h2 classstagger aria-labelWELCOME span style--i:0W/spanspan style--i:1E/span... /h2.stagger span { display: inline-block; opacity: 0; transform: translateY(1em); transition: opacity .5s, transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * 60ms); } .stagger.is-in span { opacity: 1; transform: translateY(0); }60ms 的间隔是我试出来的甜点值小于 40ms 一串字几乎同时出现没有层次大于 100ms 用户要等一秒多才看到完整标题不耐烦。触发用IntersectionObserver比监听scroll事件省得多const io new IntersectionObserver(entries { entries.forEach(en { if (en.isIntersecting) { en.target.classList.add(is-in); io.unobserve(en.target); } }); }, { threshold: 0.3 }); document.querySelectorAll(.stagger).forEach(el io.observe(el));unobserve这一句别省触发过就取消观察避免反复进出视口时动画不停重播。4. 把特效塞进真实项目的工程化处理4.1 变量化把 48 个变成 3 个48 个特效听起来多但拆开看真正变化的只有颜色、时长、缓动、方向、位移量这几个维度。所以我把它们全部抽成 CSS 变量再把公共部分收敛成基础类:root { --fx-dur: .6s; --fx-ease: cubic-bezier(.34, 1.56, .64, 1); --fx-c1: #4facfe; --fx-c2: #ff5f6d; --fx-glow: 0 0 12px; } .fx { display: inline-block; transition-duration: var(--fx-dur); transition-timing-function: var(--fx-ease); transition-property: transform, opacity, color, background-position; }实际用的时候.fx .fx-lift:hover { transform: translateY(-3px) }这种组合就够了。品牌色切换的场景特别香——改三个变量整站的强调色和动效节奏一起变不用去 48 个类里挨个找。至于要不要上原子化 CSS我的看法是有条件地用。把特效拆成.fx-glow、.fx-grad这种原子类组合确实灵活但有两个坑一是同一个元素的animation属性只能有一份两个原子类都要挂动画时会互相覆盖二是动画的时长、延迟、缓动分散在不同类里调试时要在三个地方来回跳反而更慢。所以我只把静态属性原子化颜色、阴影、裁切动效留给组合类。4.2 性能哪些属性可以放心动画这条经验值很多钱直接给结论优先动transform和opacity这两个属性可以在合成线程上处理不触发重排和重绘60 帧稳稳的。次选是filter和background-position它们会触发重绘元素小的时候没事铺满整屏就危险。最忌讳动width、height、top、left、margin、padding每一个都会触发整个文档的重排在大页面上就是肉眼可见的掉帧。text-shadow和box-shadow的动画尤其要谨慎。它们每一帧都要重新做高斯模糊计算文字层数多、字号大的时候CPU 占用会飙上去。我实测过一段 20 字的霓虹标题做呼吸动画中端安卓机上帧率掉到 30 出头把动画改到opacity上之后立刻恢复流畅。所以霓虹的呼吸一定不要去动阴影参数本身。will-change这个属性别乱加。它会让浏览器提前把元素提升到独立图层用对了能避免闪烁用多了会吃内存、反而变慢。我的做法是只在有 3D 变换或者大面积滤镜的元素上加而且动画结束后尽量移除。超过 3 台的移动设备实测下来一个页面上同时运行的文字特效我不建议超过 5 个且都不应该是长文本。4.3 兼容、降级与动效偏好background-clip: text写上-webkit-前缀基本全覆盖。paint-order: stroke fill用来解决描边吃掉字形的问题——默认描边是向两侧各扩一半笔画细的字体加上描边之后会糊成一团paint-order把描边画在填充下面字就清爽了。但它的支持范围有限所以我准备了降级方案不支持时改用两层伪元素底层做描边、上层做填充。supports not (paint-order: stroke) { .outline-text { -webkit-text-stroke: 0; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; } }第二件事是尊重系统的减弱动效设置。有些人开了这个开关是因为动效会引起不适这不是可选项media (prefers-reduced-motion: reduce) { .fx, .fx * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }第三件容易被忘的事是打印。渐变字和霓虹字在打印预览里会变成一片空白或者全黑——因为color: transparent加上打印时背景色默认不输出。所以样式表末尾要补一段media print把颜色恢复成黑色、去掉裁切。4.4 居中、换行与截断这些位置问题特效做得再好位置歪了也是白搭。文字居中这个老问题几种方案各有适用场景我按自己的使用频率排了个表方案写法适用场景注意点flex 居中display:flex; align-items:center; justify-content:center绝大多数容器单行多行都行最省心grid 居中display:grid; place-items:center一个容器只放一个元素代码最短行高法line-height等于容器高度单行文字且高度固定多行会撑破字号变化要同步改绝对定位加位移position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)浮层、气泡、徽标元素宽高未知时最好用表格水平居中要单独说直接给表格元素写text-align: center是无效的正确写法是margin-left: auto; margin-right: auto同时表格宽度不能是100%否则看不出居中效果。input的居中也是类似情况input本身是行内替换元素父级写text-align: center实际只影响它的水平位置输入内容的居中要靠input { text-align: center }单独设置。还有一个跟特效直接相关的坑多行截断。两行或三行后省略号的写法-webkit-line-clamp必须配合display: -webkit-box和-webkit-box-orient: vertical少一个都不生效。而且一旦用了这套元素内部就不能再随意换display值否则截断失效。.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }如果你要在这个截断文本上加渐变填充得注意overflow: hidden可能会把描边或发光一起裁掉这也是前面说的分层包裹思路能救场的地方。5. 常见问题与排查技巧实录5.1 症状与原因速查表症状最可能的原因处理方式渐变字不显示只有纯色块忘了color: transparent或没写-webkit-background-clip补齐两行前缀版本必须保留描边让字形变细、笔画糊描边默认两侧各占一半向字形内部侵入加paint-order: stroke fill或改双层伪元素发光上下被切掉行高过小或父级overflow: hidden提高行高给包裹层加padding: .2em霓虹在长句上糊成一片相邻字形光晕互相叠加减小模糊半径层数压到 3 到 4 层动画一顿一顿风扇狂转动了 width、left、top 等触发重排的属性换成transform和opacity::before完全不出现缺content或父级没设position: relative补上content: 与定位打字机宽度对不上末尾停顿字体不是等宽或steps()数字与字符数不符换等宽字体族或改用 JS 逐字悬停下划线在换行处断裂伪元素只有一个无法跨行改用background-size渐变方案触屏上悬停效果不触发触屏没有 hover 状态补:active/:focus-visible或 JS pointerdown伪元素文字与主文字错位伪元素inset: 0但父元素有 padding伪元素定位基准改为内容盒或包裹层分离 padding3D 翻转后文字模糊元素被光栅化到低分辨率图层加will-change: transform或translateZ(0)打印出来一片空白color: transparent加背景不输出加media print恢复纯色5.2 几个我实实在在踩过的坑第一个坑来自渐变文字的高 DPI 屏锯齿。同一段渐变字在普通屏上正常在 2 倍屏上边缘出现彩色毛刺。原因是文字被当作裁切路径时抗锯齿处理得不够好。后来我的解法是给元素加-webkit-font-smoothing: antialiased再把字号取整到偶数像素毛刺基本消掉了。第二个坑是text-shadow和background-clip: text一起用时发光消失。原因很直接color: transparent之后text-shadow是基于字形颜色绘制的透明色的阴影自然也看不见。解决办法是把发光交给外层包裹元素或者伪元素来做主元素只负责填充。这个坑我当时找了一个多小时因为现象看起来像是浏览器不支持。第三个坑是伪元素上的background继承。写故障风的时候我给主元素设置了渐变背景裁切又希望伪元素复制同样的质感就用background: inherit结果伪元素把主元素的整体背景包括盒子范围的部分也继承过来了因为裁切属性在继承时不会一并带过去。最后的处理是显式重写-webkit-background-clip: text和color: transparent不偷懒用 inherit。第四个坑是涟漪动画在快速连点时的节点堆积。前面代码里animationend删节点看起来没问题但如果用户在 0.6 秒内点了十次会有十个 span 同时存在屏幕上同时跑十个动画。我加了个简单的节流200ms 内只允许生成一个新涟漪视觉上几乎无感性能踏实多了。5.3 调试手法慢放、分层、比对调文字动效光靠肉眼盯是很低效的。我常用的三招。第一招是慢放。开发者工具的动画面板可以把播放速度降到 0.1 倍逐帧看每一层发生了什么。故障风里两个伪元素的位移轨迹对不对慢放三秒就看清了比反复改参数试快得多。第二招是分层染色。给::before临时加background: rgba(255,0,0,.3)、::after加蓝色先确认两个层的尺寸和位置再去管它们的视觉效果。我见过太多人一上来就调clip-path数值结果根本没意识到伪元素的盒子本身就是歪的。第三招是临时描边。在调试期间给元素加outline: 1px dashed magenta看清楚盒子边界、padding 边界和字形边界的差距。这套流程走一遍前面表格里 80% 的问题都能自己定位。6. 我自己长期用下来的一些习惯6.1 写特效的顺序先静态、后动画、最后降级这些年我形成了固定的三段式。第一段只写静态样式——颜色、裁切、阴影、尺寸把最终要长什么样确定下来并且截图存档。第二段才挂动画而且一次只加一个属性加完立刻用动画面板看效果。第三段补降级supports、prefers-reduced-motion、打印样式一起写。顺序颠倒的代价我付过。有次先写动画再调静态结果每改一次颜色就要重新看一遍动画节奏来回十几遍才收敛。而且动画开着的时候人眼对静态细节的判断是不准的你以为的差不多了其实是动效掩盖了瑕疵。另外缓动函数我基本只用四个linear给循环流动ease-out给进入ease-in给离开弹簧曲线cubic-bezier(.34, 1.56, .64, 1)给交互反馈。四个够用而且风格统一。6.2 那些被我从收藏夹里删掉的特效最后说点反向的经验。48 个里面有几个我自己是基本不用的。斜体加粗配上大幅度旋转的文艺风标题在中文里几乎不可读中文没有西文那种斜体字形浏览器是强行做倾斜变换的笔画会糊。还有跟随鼠标全屏移动的光点看起来高级但会强迫用户的眼睛一直跟着光点走看两分钟就累放在首屏尤其劝退。这类效果我现在只在很短的交互区域里用比如一个卡片内部。再有就是依赖大量 DOM 的逐字动画。拆字这件事对 8 个字母的英文标题没问题中文标题动辄十几个字加上移动端要考虑换行拆分逻辑会变得非常麻烦而且每拆一次都要处理aria-label可访问性。中文标题我一般不逐字动改成整块淡入加轻微上移效果稳、代码少、读屏也能正常读。至于收藏这件事本身我的建议是别收藏代码片段收藏参数表。代码会长得很快但模糊半径的倍率是 2.2、逐字延迟是 60ms、弹簧曲线的四个数是 .34 / 1.56 / .64 / 1这类数字才是能跨项目复用的东西。我这次的 48 个特效真正被反复查的就是这三行数字和一张缓动曲线对照表。 纯CSS文字特效48例：渐变、霓虹、故障风与工程化实践
这套东西我前后整理了一个通宵说实话不是为了凑数。做前端这些年标题类、banner 类、活动页里的文字特效需求几乎没有断过——运营要闪一点产品要高级一点老板要像大厂那样。每次都要翻聊天记录、翻本地旧项目效率低得离谱。所以这回干脆把散落在各个项目里的写法全部抽出来统一变量、统一命名、统一降级策略最后落在 48 个能直接抄的案例上。下文里说的文字特效指的就是用纯 CSS个别地方补几行 JS 兜底对文本本身做视觉加工——渐变填充、描边、发光、位移、遮罩、交互反馈这一类不涉及任何框架和构建工具复制粘贴到任意 HTML 页面就能跑。适合刚学完 CSS 基础想找练手素材的同学也适合手上有活动页要交付、没时间从零调参数的老手。下面我按分类思路、底层原理、逐个实现、工程化处理、排查经验的顺序讲参数为什么这么取、坑在哪都会说清楚。1. 48 个特效的分组逻辑与选型考量1.1 文字特效在真实项目里到底解决什么问题先说一个我经常被问到的判断文字特效不是装饰它是信息层级的一种表达手段。页面里一个普通 h1 和一段正文视觉权重本来就该拉开而拉开权重最省成本的方式就是把标题做点处理。实测下来落到具体场景无非这么几类官网首屏主标题需要一个持续但不刺眼的动效把用户视线钉在最上方 3 秒活动页的倒计时、价格、优惠码需要高对比的强调最好还能闪一下数据看板里的大数字需要滚动计数让变化这件事被看见空状态页、404 页、加载文案需要一个不让人焦虑的小动效压住等待感还有交互反馈——按钮悬停、链接下划线这些都属于文字特效的范畴。反过来说哪些地方千万别用我心里也有一条线。正文段落、列表项、表格内容、表单标签上面挂动效阅读成本直接翻倍用户会不自觉地被正在动的那个元素吸走注意力然后就找不到自己刚才读到哪了。我自己的原则是一屏之内同时在动的文字元素不超过两个且动效周期不短于 2 秒否则页面看起来像菜市场。这个判断标准比任何设计规范都好用因为它直接对应到人的视觉系统带宽。还有一点值得提前说文字特效的成本被严重低估了。写一个渐变字 3 分钟把它调成在深色背景和浅色背景都好看、在小屏和大屏都不糊、在低端安卓机上不掉帧可能要 2 小时。所以后文我会花不少篇幅讲变量化和降级那才是真正省时间的地方。1.2 六组分类清单48 个特效的全貌我把这 48 个按实现手法分成六组每组 8 个。分组不是为了好看而是因为同组内的技术骨架是一样的学会一个基本能推出一整组。分组核心技术手段包含的特效一、静态材质背景裁切、描边、多层阴影渐变填充字、金属拉丝字、粗细描边字、镂空描边字、凸版内阴影字、长投影字、立体挤出字、剪影镂空字二、光影动效text-shadow 堆叠、遮罩扫光霓虹呼吸字、高光扫过字、冷光晕染字、星点闪烁字、边缘流光字、烛火摇曳字、电流脉冲字、光斑扩散字三、位移形变transform 与逐字拆分波浪起伏字、逐字弹跳字、3D 翻转字、立体旋转字、字母挤压字、坠落回弹字、心跳缩放字、抖动毛刺字四、划线装饰伪元素、背景渐变划线生长下划线、双线滑入下划线、删除线动画、波浪下划线、段落分割线、荧光笔涂抹、括号包裹、引号角标五、遮罩填充background-clip 系列图片填充字、视频填充字、鼠标跟随背景字、镂空露出背景字、双色叠影字、半调网点字、条纹滚动字、纹理叠加字六、交互场景事件驱动 过渡动画点击涟漪字、悬停扫描线、数字滚动计数、Tab 悬停指示条、霓虹按钮文字、打字机标签页、进入视口逐字显现、鼠标跟随光点看到这张表你会发现一个规律第一组和第二组吃的是绘制能力第三组吃的是变换能力第四组和第五组吃的是伪元素加裁切第六组吃的是状态与事件。把这四种能力拆开练48 个特效里真正需要重新思考的其实不到 10 个剩下的都是参数换皮。1.3 为什么按这个顺序学而不是从最炫的开始新手最容易犯的错是从故障风、3D 翻转这些视觉冲击最强的开始学结果一上来就要同时处理伪元素定位、关键帧、混合模式、性能四个问题卡住之后容易放弃。我的建议顺序是静态材质 → 划线装饰 → 光影动效 → 遮罩填充 → 位移形变 → 交互场景。理由很实在。静态材质阶段你只需要理解颜色从哪来、边界在哪这是后面所有效果的地基划线装饰阶段你学会伪元素和定位这是第二重要的基本功到了光影阶段才引入动画时间和缓动函数此时你已经有了稳定的静态效果作为参照调参不容易失控遮罩填充阶段接触 background-clip跟第一组天然衔接位移形变最难的地方是文本必须拆成单字涉及 DOM 结构改造放到后面处理交互场景需要配合 JS 事件放在最后最合适。提示如果你只是临时要做个活动页没必要全学。直接跳到第 3 节对应的实现把参数里的颜色变量替成自己的品牌色就能交付了。2. 写特效前必须打牢的底层原理2.1 文本渲染的三个层级字体度量、行盒与定位很多人调文字特效时遇到光晕被切掉一半描边上下不对称第一反应是调 padding结果按下葫芦浮起瓢。根子在于没搞清楚浏览器渲染文本时的三层结构。最内层是字体度量也就是字体文件里自带的 em 盒、ascent基线以上高度、descent基线以下高度。这些数字是字体设计师定死的你改不了。中间层是行盒由line-height决定当行高小于字体度量时字形不会缩小而是溢出并被相邻行或容器裁掉。最外层才是元素盒模型由 width、height、padding、border 决定。文字特效里的发光、描边、位移都发生在最内层但裁剪发生在中间层和最外层。所以发光被切这类问题的正确解法不是加 padding而是排查三处容器有没有overflow: hidden行盒够不够高line-height是不是小于 1.2父级有没有contain: paint之类的裁剪。我通常的做法是给特效文字单独套一个带padding: .2em的包裹层把裁剪边界往外推逻辑上是让外层盒子比字形大一圈而不是去动行高。这个思路能解决 80% 的特效被切问题。2.2 伪元素才是文字特效的真正主力48 个特效里超过一半依赖::before和::after。原因很简单一个 HTML 文本节点在视觉上只能有一种填充、一种描边、一种阴影但特效经常需要两层同样文字、错位叠加的效果——故障风的红蓝分离、双色叠影、删除线、下划线全都是靠伪元素复制一份再偏移。用伪元素有几个硬性规则必须记住。第一content属性不能省哪怕是空字符串否则伪元素不生成第二伪元素默认是行内元素要给它定宽高、做绝对定位必须写display: block或position: absolute第三伪元素不能用在替换元素上input、img、textarea上写::before是无效的这也是为什么按钮的涟漪效果通常得套一层span或者直接改结构。还有一个细节常被忽略伪元素如果要复制文字内容靠content: attr(data-text)从父元素的>h1 classglitch>.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; }2.3 background-clip 与 text-shadow 的坐标系差异这两个属性是文字特效的两大支柱但它们的坐标系完全不一样混用的时候特别容易出错。background-clip: text的工作方式是把文字的字形当作裁剪路径只保留背景落在字形内部的部分。这里的关键是背景本身的定位坐标系是元素的盒子不是字形。也就是说你写linear-gradient(90deg, red, blue)渐变的起点在盒子左边、终点在盒子右边而不是从第一个字的左边到最后一个字的右边。如果你给元素加了左右 padding渐变的可见范围就会偏移看起来像是渐变没铺满。解决办法一般是把 padding 移到外层包裹元素上或者用background-origin调整参考框。text-shadow则完全是另一套它的定位参考是每一个字形自身偏移量相对字形原点计算模糊半径是以高斯模糊的方式向外扩散。所以text-shadow: 0 0 20px #0ff会在每个字周围形成一圈 20px 的光晕长文本里相邻字的光晕会互相叠加中间区域会明显更亮。这就是霓虹字在长句上糊成一片的真正原因跟层数太多是两回事——短文本能用的参数长文本必须调小。理解了这两套坐标系很多为什么这个参数在这个场景管用、换个场景就废了的困惑就自然解开了。2.4 选择器策略与样式引入方式对特效维护的影响特效写多了样式表的组织方式会变成主要矛盾。我踩过的坑主要集中在选择器和引入方式两点上。选择器方面类选择器.fx-neon优先级是 0-1-0ID 选择器#title是 1-0-0。特效类我会一律用类选择器而且前缀统一原因是特效经常需要叠加——一个字既要渐变又要悬停发光这时候两个类一起挂优先级相同、靠书写顺序决定胜负比 ID 混在里面好控制得多。:not()用得也不少比如.fx-text:not(.fx-no-anim)用来给部分元素关掉动效。至于通配符*除非做全局 reset我不建议在特效里用它的匹配范围太大在长列表页面上会增加样式计算的开销而且容易把你辛苦调好的text-shadow一并覆盖掉。引入方式这边外链 CSS 和内联style的差别在特效场景里会被放大特效样式动辄几百行全塞进 HTML 里会让首屏文档体积膨胀但完全外链又可能出现先看到无样式的纯文字、再突然变形的闪烁。我现在的做法是把跟首屏主标题相关的十几个属性用内联style写在文档头部俗称关键 CSS其余特效留在外链文件里。至于import它是串行加载的会拖慢渲染特效样式表里基本不用。3. 六组特效的完整实现与关键参数3.1 渐变填充与金属质感让文字有材质先说最常用也最容易被低估的渐变字。核心三行是背景、裁切、透明色缺一不可.grad-text { background: linear-gradient(90deg, #ff5f6d, #ffc371, #47cf73, #4facfe, #ff5f6d); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-flow 8s linear infinite; } keyframes grad-flow { to { background-position: -300% 0; } }这里有两个参数值得掰开讲。第一为什么第一个色标和最后一个色标是同一个颜色因为要让循环无缝。动画从background-position: 0走到-300%起点位置的背景和终点位置的背景必须完全一致否则每 8 秒会看到一次跳变。第二background-size: 300%和位移量-300%必须对应同一个值它是一份完整渐变的宽度。想让流动更快缩短时长不要改位移量——改位移量会破坏无缝。金属拉丝字的思路完全不同它靠的是高频窄条纹叠加用重复线性渐变做出拉丝纹路再加一层竖向的明暗渐变模拟反光.metal-text { background: linear-gradient(180deg, #fff 0%, #b8b8b8 45%, #6e6e6e 52%, #e8e8e8 60%, #fff 100%), repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.12) 2px 4px); background-blend-mode: overlay; -webkit-background-clip: text; background-clip: text; color: transparent; }repeating-linear-gradient的 2px/4px 周期决定了拉丝的细腻程度在 1 倍屏上 2px 还能看在 2 倍屏上就偏粗了所以我会用0.06em这类相对单位让条纹随字号缩放。另外金属字建议搭配font-weight: 800以上的粗体细体字笔画太窄条纹根本铺不开看起来就是一团灰。注意background-clip: text必须保留-webkit-前缀版本因为目前主流浏览器仍然只认带前缀的写法。同时color: transparent一定要写忘了它你会得到一个纯黑背景块——这是新手最常见的翻车点。3.2 霓虹呼吸与高光扫过多层阴影的取参逻辑霓虹字的原理是同一个颜色的多层阴影模糊半径逐级翻倍、透明度逐级衰减模拟真实光源从中心向外扩散的衰减曲线。.neon-text { color: #f6fbff; text-shadow: 0 0 2px #fff, 0 0 6px #7af, 0 0 14px #2af, 0 0 30px #06f, 0 0 60px #03c; animation: neon-breathe 2.6s ease-in-out infinite alternate; } keyframes neon-breathe { from { opacity: .82; } to { opacity: 1; } }半径的取值规律我实测下来是这样相邻两层的半径比在 2 到 2.5 之间最自然比 2 小会看出明显的圈层感比 3 大会出现断层总层数控制在 5 层以内超过之后边缘会糊成一坨灰白反而失去霓虹的通透感。呼吸动画不要用text-shadow做关键帧开销大且不平滑改成动opacity或者动最外层的一层阴影既省性能视觉上也够用。高光扫过Shimmer是另一条路线它不靠阴影靠的是一个窄白条在文字上横向掠过本质还是背景裁切.shimmer-text { background: linear-gradient(100deg, #8a94a6 30%, #ffffff 45%, #ffffff 55%, #8a94a6 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 3.2s ease-in-out infinite; } keyframes shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }中间两个 45% 和 55% 的白点构成高光宽度占整体 10%这个比例是视觉上最像金属反光的。想更锐利就收窄到 48%/52%想更柔和就放宽到 35%/65%。3.3 打字机与逐字入场steps 与 ch 单位的配合打字机效果纯 CSS 也能做但有两个硬性前提很多人不知道所以就做不出来。.typewriter { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; overflow: hidden; border-right: 2px solid currentColor; width: 0; animation: typing 2.4s steps(12) forwards, caret .8s step-end infinite; } keyframes typing { to { width: 12ch; } } keyframes caret { 50% { border-right-color: transparent; } }第一个前提是等宽字体。宽度用ch单位1ch 等于当前字体下数字 0 的宽度只有在等宽字体里每个字符宽度才相同动画才走得均匀。第二个前提是white-space: nowrap否则宽度增长的过程中文字会换行效果全乱。steps(12)里的 12 是字符数写错了会在末尾多停或少停一拍。但 CSS 版有个致命缺陷文案一改步骤数、宽度、时长三个参数要同步改忘记一个就露馅。所以在真实项目里我基本都用 JS 版逐字追加function typewriter(el, text, speed 90) { el.textContent ; let i 0; const timer setInterval(() { el.textContent text[i] || ; if (i text.length) clearInterval(timer); }, speed); return () clearInterval(timer); }节奏上有个小经验标点符号处可以多停 150ms 左右读起来更像真人在打字。纯匀速会显得机械。3.4 故障风与抖动clip-path 与双伪元素的错位故障风Glitch看着唬人拆开就三层底层是正常文字上面两个伪元素各复制一份用clip-path切出水平条带再各自做位移。.glitch { position: relative; color: #eaeaea; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; background: inherit; } .glitch::before { color: #ff2d55; clip-path: inset(20% 0 60% 0); animation: glitch-a 2.4s steps(2, end) infinite; } .glitch::after { color: #00d1ff; clip-path: inset(65% 0 15% 0); animation: glitch-b 1.8s steps(2, end) infinite; } keyframes glitch-a { 0%, 92%, 100% { transform: translate(0, 0); } 94% { transform: translate(-3px, -2px); } 97% { transform: translate(2px, 1px); } }关键参数是clip-path: inset(上 右 下 左)它决定条带的位置和高度。两个伪元素要覆盖不同的高度区间且不要刚好互补中间留一点重叠区域视觉上更自然。动画时长用steps(2, end)是为了让位移瞬间发生而非平滑过渡——故障感来自突兀。抖动毛刺字本质是同一套只是把clip-path去掉改成随机的translate加极短时长配合transform: skewX()做横向剪切。这里要提醒一句抖动的位移量不要超过 3px超过之后文字识别度断崖式下降用户会以为是页面渲染坏了。3.5 划线装饰下划线生长、删除线动画与段落分割线text-decoration有个让人抓狂的限制它的颜色、粗细、偏移可以过渡但线条的长度和位置无法用 transition 动画化。所以所有下划线从中间长出来删除线从左扫到右的效果全都要用伪元素或者背景渐变模拟。伪元素版本适合单行文字.link-underline { position: relative; } .link-underline::after { content: ; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .link-underline:hover::after { transform: scaleX(1); }这里用transform: scaleX()而不是动width原因是 transform 走合成层不触发重排重绘长列表里差别明显。transform-origin决定生长方向left center是从左往右改成center就是从中间向两侧展开。跨行文字就不行了伪元素只有一个跨行会断成奇怪的样子。跨行场景我改用背景渐变方案.link-multiline { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size .3s cubic-bezier(.4, 0, .2, 1); } .link-multiline:hover { background-size: 100% 2px; }背景会跟着每一行重复绘制所以换行也自然。代价是它面向所有行同时生长没法做到逐行依次出现。删除线动画同理把bottom: -2px改成top: 50%高度用小值就得到一条从左侧扫过文字中线的删除线。段落分割线则是另一个思路用 flex 让文字居中、两侧自动填充横线.divider { display: flex; align-items: center; gap: .8em; color: #8a94a6; } .divider::before, .divider::after { content: ; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); }两侧用渐变而不是纯色端点自然淡出比生硬的实线好看很多。3.6 点击涟漪与悬停扫描交互态的文字反馈文字上的涟漪效果跟按钮上的做法一样难点在于涟漪要从点击位置扩散而不是从元素中心。纯 CSS 做不到读取点击坐标必须补几行 JS。document.querySelectorAll(.fx-ripple).forEach(el { el.addEventListener(pointerdown, e { const rect el.getBoundingClientRect(); const span document.createElement(span); const size Math.max(rect.width, rect.height) * 2; span.className ripple; span.style.width span.style.height size px; span.style.left (e.clientX - rect.left - size / 2) px; span.style.top (e.clientY - rect.top - size / 2) px; el.appendChild(span); span.addEventListener(animationend, () span.remove()); }); });.fx-ripple { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; } .ripple { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%); transform: scale(0); pointer-events: none; animation: ripple-out .6s ease-out forwards; } keyframes ripple-out { to { transform: scale(1); opacity: 0; } }尺寸取长宽较大值的 2 倍是保证无论点在哪里涟漪的圆形都能完全覆盖元素。-webkit-tap-highlight-color: transparent这一行是为了压掉移动端点击时系统自带的灰色高亮块不加的话两个反馈会打架。动画结束后必须把节点删掉否则连点几十次会堆一堆 DOM长页面上能明显感到卡顿。悬停扫描线是纯 CSS一个线性渐变横条在 hover 时纵向穿过文字.scan-text { background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%); background-size: 100% 300%; background-position: 0 -150%; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position .6s ease; } .scan-text:hover { background-position: 0 150%; }这里背景的移动范围要大于background-size才能保证扫描条完全从上方进入、从下方离开中间不停留。3.7 3D 翻转与滚动显现透视、计数与视口观察3D 翻转字有两个必须配齐的属性缺一个就是平的。父级要有perspective一般是字号的 4 到 8 倍元素自身要有backface-visibility: hidden否则翻到背面会看到镜像的文字。.flip-wrap { perspective: 600px; display: inline-block; } .flip-char { display: inline-block; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } .flip-wrap:hover .flip-char { transform: rotateX(-90deg); }cubic-bezier(.34, 1.56, .64, 1)这个缓动函数里第二个参数大于 1会产生轻微过冲也就是翻过去之后回弹一下手感比线性好得多。这个函数我在 48 个特效里用了至少 15 次属于万能弹簧曲线。逐字拆分入场需要改 HTML 结构把文字拆成单个span然后用 CSS 变量控制延迟h2 classstagger aria-labelWELCOME span style--i:0W/spanspan style--i:1E/span... /h2.stagger span { display: inline-block; opacity: 0; transform: translateY(1em); transition: opacity .5s, transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * 60ms); } .stagger.is-in span { opacity: 1; transform: translateY(0); }60ms 的间隔是我试出来的甜点值小于 40ms 一串字几乎同时出现没有层次大于 100ms 用户要等一秒多才看到完整标题不耐烦。触发用IntersectionObserver比监听scroll事件省得多const io new IntersectionObserver(entries { entries.forEach(en { if (en.isIntersecting) { en.target.classList.add(is-in); io.unobserve(en.target); } }); }, { threshold: 0.3 }); document.querySelectorAll(.stagger).forEach(el io.observe(el));unobserve这一句别省触发过就取消观察避免反复进出视口时动画不停重播。4. 把特效塞进真实项目的工程化处理4.1 变量化把 48 个变成 3 个48 个特效听起来多但拆开看真正变化的只有颜色、时长、缓动、方向、位移量这几个维度。所以我把它们全部抽成 CSS 变量再把公共部分收敛成基础类:root { --fx-dur: .6s; --fx-ease: cubic-bezier(.34, 1.56, .64, 1); --fx-c1: #4facfe; --fx-c2: #ff5f6d; --fx-glow: 0 0 12px; } .fx { display: inline-block; transition-duration: var(--fx-dur); transition-timing-function: var(--fx-ease); transition-property: transform, opacity, color, background-position; }实际用的时候.fx .fx-lift:hover { transform: translateY(-3px) }这种组合就够了。品牌色切换的场景特别香——改三个变量整站的强调色和动效节奏一起变不用去 48 个类里挨个找。至于要不要上原子化 CSS我的看法是有条件地用。把特效拆成.fx-glow、.fx-grad这种原子类组合确实灵活但有两个坑一是同一个元素的animation属性只能有一份两个原子类都要挂动画时会互相覆盖二是动画的时长、延迟、缓动分散在不同类里调试时要在三个地方来回跳反而更慢。所以我只把静态属性原子化颜色、阴影、裁切动效留给组合类。4.2 性能哪些属性可以放心动画这条经验值很多钱直接给结论优先动transform和opacity这两个属性可以在合成线程上处理不触发重排和重绘60 帧稳稳的。次选是filter和background-position它们会触发重绘元素小的时候没事铺满整屏就危险。最忌讳动width、height、top、left、margin、padding每一个都会触发整个文档的重排在大页面上就是肉眼可见的掉帧。text-shadow和box-shadow的动画尤其要谨慎。它们每一帧都要重新做高斯模糊计算文字层数多、字号大的时候CPU 占用会飙上去。我实测过一段 20 字的霓虹标题做呼吸动画中端安卓机上帧率掉到 30 出头把动画改到opacity上之后立刻恢复流畅。所以霓虹的呼吸一定不要去动阴影参数本身。will-change这个属性别乱加。它会让浏览器提前把元素提升到独立图层用对了能避免闪烁用多了会吃内存、反而变慢。我的做法是只在有 3D 变换或者大面积滤镜的元素上加而且动画结束后尽量移除。超过 3 台的移动设备实测下来一个页面上同时运行的文字特效我不建议超过 5 个且都不应该是长文本。4.3 兼容、降级与动效偏好background-clip: text写上-webkit-前缀基本全覆盖。paint-order: stroke fill用来解决描边吃掉字形的问题——默认描边是向两侧各扩一半笔画细的字体加上描边之后会糊成一团paint-order把描边画在填充下面字就清爽了。但它的支持范围有限所以我准备了降级方案不支持时改用两层伪元素底层做描边、上层做填充。supports not (paint-order: stroke) { .outline-text { -webkit-text-stroke: 0; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; } }第二件事是尊重系统的减弱动效设置。有些人开了这个开关是因为动效会引起不适这不是可选项media (prefers-reduced-motion: reduce) { .fx, .fx * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }第三件容易被忘的事是打印。渐变字和霓虹字在打印预览里会变成一片空白或者全黑——因为color: transparent加上打印时背景色默认不输出。所以样式表末尾要补一段media print把颜色恢复成黑色、去掉裁切。4.4 居中、换行与截断这些位置问题特效做得再好位置歪了也是白搭。文字居中这个老问题几种方案各有适用场景我按自己的使用频率排了个表方案写法适用场景注意点flex 居中display:flex; align-items:center; justify-content:center绝大多数容器单行多行都行最省心grid 居中display:grid; place-items:center一个容器只放一个元素代码最短行高法line-height等于容器高度单行文字且高度固定多行会撑破字号变化要同步改绝对定位加位移position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)浮层、气泡、徽标元素宽高未知时最好用表格水平居中要单独说直接给表格元素写text-align: center是无效的正确写法是margin-left: auto; margin-right: auto同时表格宽度不能是100%否则看不出居中效果。input的居中也是类似情况input本身是行内替换元素父级写text-align: center实际只影响它的水平位置输入内容的居中要靠input { text-align: center }单独设置。还有一个跟特效直接相关的坑多行截断。两行或三行后省略号的写法-webkit-line-clamp必须配合display: -webkit-box和-webkit-box-orient: vertical少一个都不生效。而且一旦用了这套元素内部就不能再随意换display值否则截断失效。.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }如果你要在这个截断文本上加渐变填充得注意overflow: hidden可能会把描边或发光一起裁掉这也是前面说的分层包裹思路能救场的地方。5. 常见问题与排查技巧实录5.1 症状与原因速查表症状最可能的原因处理方式渐变字不显示只有纯色块忘了color: transparent或没写-webkit-background-clip补齐两行前缀版本必须保留描边让字形变细、笔画糊描边默认两侧各占一半向字形内部侵入加paint-order: stroke fill或改双层伪元素发光上下被切掉行高过小或父级overflow: hidden提高行高给包裹层加padding: .2em霓虹在长句上糊成一片相邻字形光晕互相叠加减小模糊半径层数压到 3 到 4 层动画一顿一顿风扇狂转动了 width、left、top 等触发重排的属性换成transform和opacity::before完全不出现缺content或父级没设position: relative补上content: 与定位打字机宽度对不上末尾停顿字体不是等宽或steps()数字与字符数不符换等宽字体族或改用 JS 逐字悬停下划线在换行处断裂伪元素只有一个无法跨行改用background-size渐变方案触屏上悬停效果不触发触屏没有 hover 状态补:active/:focus-visible或 JS pointerdown伪元素文字与主文字错位伪元素inset: 0但父元素有 padding伪元素定位基准改为内容盒或包裹层分离 padding3D 翻转后文字模糊元素被光栅化到低分辨率图层加will-change: transform或translateZ(0)打印出来一片空白color: transparent加背景不输出加media print恢复纯色5.2 几个我实实在在踩过的坑第一个坑来自渐变文字的高 DPI 屏锯齿。同一段渐变字在普通屏上正常在 2 倍屏上边缘出现彩色毛刺。原因是文字被当作裁切路径时抗锯齿处理得不够好。后来我的解法是给元素加-webkit-font-smoothing: antialiased再把字号取整到偶数像素毛刺基本消掉了。第二个坑是text-shadow和background-clip: text一起用时发光消失。原因很直接color: transparent之后text-shadow是基于字形颜色绘制的透明色的阴影自然也看不见。解决办法是把发光交给外层包裹元素或者伪元素来做主元素只负责填充。这个坑我当时找了一个多小时因为现象看起来像是浏览器不支持。第三个坑是伪元素上的background继承。写故障风的时候我给主元素设置了渐变背景裁切又希望伪元素复制同样的质感就用background: inherit结果伪元素把主元素的整体背景包括盒子范围的部分也继承过来了因为裁切属性在继承时不会一并带过去。最后的处理是显式重写-webkit-background-clip: text和color: transparent不偷懒用 inherit。第四个坑是涟漪动画在快速连点时的节点堆积。前面代码里animationend删节点看起来没问题但如果用户在 0.6 秒内点了十次会有十个 span 同时存在屏幕上同时跑十个动画。我加了个简单的节流200ms 内只允许生成一个新涟漪视觉上几乎无感性能踏实多了。5.3 调试手法慢放、分层、比对调文字动效光靠肉眼盯是很低效的。我常用的三招。第一招是慢放。开发者工具的动画面板可以把播放速度降到 0.1 倍逐帧看每一层发生了什么。故障风里两个伪元素的位移轨迹对不对慢放三秒就看清了比反复改参数试快得多。第二招是分层染色。给::before临时加background: rgba(255,0,0,.3)、::after加蓝色先确认两个层的尺寸和位置再去管它们的视觉效果。我见过太多人一上来就调clip-path数值结果根本没意识到伪元素的盒子本身就是歪的。第三招是临时描边。在调试期间给元素加outline: 1px dashed magenta看清楚盒子边界、padding 边界和字形边界的差距。这套流程走一遍前面表格里 80% 的问题都能自己定位。6. 我自己长期用下来的一些习惯6.1 写特效的顺序先静态、后动画、最后降级这些年我形成了固定的三段式。第一段只写静态样式——颜色、裁切、阴影、尺寸把最终要长什么样确定下来并且截图存档。第二段才挂动画而且一次只加一个属性加完立刻用动画面板看效果。第三段补降级supports、prefers-reduced-motion、打印样式一起写。顺序颠倒的代价我付过。有次先写动画再调静态结果每改一次颜色就要重新看一遍动画节奏来回十几遍才收敛。而且动画开着的时候人眼对静态细节的判断是不准的你以为的差不多了其实是动效掩盖了瑕疵。另外缓动函数我基本只用四个linear给循环流动ease-out给进入ease-in给离开弹簧曲线cubic-bezier(.34, 1.56, .64, 1)给交互反馈。四个够用而且风格统一。6.2 那些被我从收藏夹里删掉的特效最后说点反向的经验。48 个里面有几个我自己是基本不用的。斜体加粗配上大幅度旋转的文艺风标题在中文里几乎不可读中文没有西文那种斜体字形浏览器是强行做倾斜变换的笔画会糊。还有跟随鼠标全屏移动的光点看起来高级但会强迫用户的眼睛一直跟着光点走看两分钟就累放在首屏尤其劝退。这类效果我现在只在很短的交互区域里用比如一个卡片内部。再有就是依赖大量 DOM 的逐字动画。拆字这件事对 8 个字母的英文标题没问题中文标题动辄十几个字加上移动端要考虑换行拆分逻辑会变得非常麻烦而且每拆一次都要处理aria-label可访问性。中文标题我一般不逐字动改成整块淡入加轻微上移效果稳、代码少、读屏也能正常读。至于收藏这件事本身我的建议是别收藏代码片段收藏参数表。代码会长得很快但模糊半径的倍率是 2.2、逐字延迟是 60ms、弹簧曲线的四个数是 .34 / 1.56 / .64 / 1这类数字才是能跨项目复用的东西。我这次的 48 个特效真正被反复查的就是这三行数字和一张缓动曲线对照表。