html无艺术字功能，所有特效需css实现；text-shadow多层叠加可做发光/立体字，background-clip:text配合渐变或图片填充文字，@keyframes实现轻量动画，但须兼顾性能与可访问性。
HTML 本身不提供“艺术字”或“炫酷文字特效”的内置功能，所有视觉效果都得靠 CSS 实现；直接写 <h1>炫酷文字</h1> 不会自动变特效，必须手动加样式。
用 text-shadow 做基础立体/发光字
这是最轻量、兼容性最好（IE10+）的方案，适合做描边、浮雕、霓虹光效。单层 text-shadow 效果弱，多层叠加才出彩。
常见错误：只写一层阴影，或者用错颜色（比如黑字配深灰阴影，看不出层次）。
- 发光效果：深色背景上用浅色文字 + 多层同色渐变阴影，例如
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00aaff; - 立体字：用偏移+模糊控制方向感，例如
text-shadow: 2px 2px 0 #333, 4px 4px 0 #666;（注意第三参数为0才锐利） - 别在文字上滥用超过 5 层
text-shadow，iOS Safari 渲染可能卡顿，安卓低端机易掉帧
background-clip: text + -webkit-text-fill-color 实现渐变/图片填充字
这个组合能做出文字内部是渐变色、贴图甚至视频纹理的效果，但它是非标准属性，必须加 -webkit- 前缀，且 Firefox 全面不支持（直到 2024 年仍无原生支持计划）。
立即学习“前端免费学习笔记（深入）”；
使用场景：Banner 标题、活动页主文案；不适合正文或 SEO 关键文字（搜索引擎无法识别填充内容）。
- 必须设置
color: transparent或-webkit-text-fill-color: transparent，否则背景会被文字颜色盖住 - 渐变示例：
background: linear-gradient(45deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; - 图片填充时，
background-size和background-position得配合文字尺寸调，否则图案被拉伸或截断
用 @keyframes + animation 让文字动起来
纯 CSS 动画比 JS 更轻、更易维护，但要注意：动画触发依赖文字渲染完成，如果字体加载慢（比如自定义 @font-face），可能闪一下才动。
容易踩的坑：动画过程中改变文字内容（如 Vue/React 动态更新 v-model 或 state），会导致动画重置或跳帧。
- 推荐用
transform动画（如scale,rotate,translate），性能远好于left/top或color - 避免对大量文字同时开动画（比如一整段
<p></p>），建议只作用于<span></span>或<h2></h2>级别标题 - 加
animation-fill-mode: forwards，让动画停在最后一帧，不然动完会“弹回”原始状态
真正难的不是写出一个炫酷效果，而是判断它是否该出现在当前页面——移动端字体加载延迟、低端机掉帧、屏幕阅读器无法解析装饰性样式，这些都会让“炫酷”变成体验断点。动手前先问一句：这个文字，用户是来读它的，还是来看它的？
