CSS3怎样实现文字特效

CSS3 实现文字特效主要利用文字阴影、渐变、描边、动画、背景裁剪等特性。下面按常见效果分类，给你实用的实现方式和示例。

一、文字阴影（text-shadow）

1️⃣ 发光文字

.glow {
  font-size: 48px;
  color: #fff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}

2️⃣ 立体文字

.3d {
  font-size: 48px;
  color: #fff;
  text-shadow:
    1px 1px #999,
    2px 2px #888,
    3px 3px #777;
}

二、文字渐变（background-clip）

⚠️ 核心技巧：用背景做渐变，再裁剪到文字

.gradient-text {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

✅ 常用搭配：

-webkit-text-fill-color: transparent;
background-clip: text;

三、文字描边（text-stroke）

1️⃣ 普通描边

.stroke {
  font-size: 48px;
  color: white;
  -webkit-text-stroke: 2px black;
}

2️⃣ 镂空文字

.hollow {
  font-size: 48px;
  color: transparent;
  -webkit-text-stroke: 2px #ff5722;
}

四、文字动画（@keyframes + animation）

1️⃣ 呼吸发光

@keyframes glow {
  0%, 100% { text-shadow: 0 0 10px #0ff; }
  50% { text-shadow: 0 0 20px #0ff; }
}

.animated-glow {
  font-size: 48px;
  animation: glow 2s infinite;
}

2️⃣ 渐变流动

@keyframes flow {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}

.flow-text {
  font-size: 48px;
  background: linear-gradient(90deg, #ff6a00, #ee0979, #ff6a00);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: flow 3s linear infinite;
}

五、霓虹灯文字

.neon {
  font-size: 48px;
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #ff00ff,
    0 0 20px #ff00ff;
}

六、模糊文字（毛玻璃）

.blur {
  font-size: 48px;
  color: transparent;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

七、打字机效果

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

.typing {
  font-size: 32px;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid;
  width: 0;
  animation: typing 3s steps(20) forwards;
}

八、常用组合技巧总结

九、兼容提示

• -webkit- 前缀在 Chrome / Safari 仍常用
• background-clip: text 尚属实验性特性
• 移动端基本支持良好

如果你需要：

• 某个具体效果
• 适合网页标题 / 按钮 / LOGO
• 更炫酷的 3D / WebGL 效果

可以直接告诉我，我可以给你定制一套完整方案 ✅