纯 CSS 实现 3D 文字效果实战教程
在网页设计中，立体文字效果通常被认为需要设计师切图或使用 WebGL 实现。然而，仅通过 HTML 和 CSS 即可达成类似视觉效果。本文将介绍如何利用 text-shadow 和 transform 属性，在不引入额外资源的情况下创建高质量的 3D 文字。
HTML 骨架：简洁至上
很多人一听说要做特效，起手就是多层嵌套的 div。实际上，3D 文字特效最爽的地方在于它不关心 HTML 写得有多复杂，甚至越简单越好。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3D 文字特效</title>
<style>
/* 基础样式，让文字居中，背景深色方便看效果 */
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
font-family: 'Microsoft YaHei', sans-serif;
}
</style>
</head>
<body>
<!-- 语义化标签 h1 -->
<h1 class="threed-text">炫酷 3D 文字</h1>
</body>
</html>
使用 h1 标签不仅语义化更好，搜索引擎也能识别这是重点内容。原则是：能少一层就少一层。
text-shadow：被低估的维度折叠术
大多数人知道 text-shadow 是用来给文字加阴影的。但 3D 效果的核心秘密在于：多层阴影叠加。浏览器会按顺序渲染，后面的盖在前面的上面。
伪 3D 效果
.threed-text {
font-size: 80px;
font-weight: bold;
color: #fff;
/* 本体颜色 */
text-shadow:
/* 第一层阴影，往右下偏移 1px，颜色稍微深一点 */
1px 1px 0 #ddd,
/* 第二层，偏移 2px，更深 */
2px 2px 0 #bbb,
/* 第三层，偏移 3px */
3px 3px 0 #999,
/* 第四层，偏移 4px */
4px 4px 0 #777,
/* 最后一层，偏移 5px，加上模糊，做投影效果 */
5px 5px 10px rgba(0, 0, 0, 0.3);
}
每一层阴影都比上一层偏移多 1px，颜色逐渐变深，视觉上形成一个厚度。
浮雕效果
如果想做成'刻进去'的效果，将偏移量改成负的：
.threed-text {
font-size: 80px;
font-weight: bold;
color: #2c3e50;
background: #ecf0f1;
padding: 20px;
text-shadow:
/* 往左上偏移，颜色比背景亮，模拟高光 */
-1px -1px 0 rgba(255, 255, 255, 0.8),
/* 往右下偏移，颜色比背景暗，模拟阴影 */
1px 1px 0 rgba(0, 0, 0, 0.2);
}
土豪金立体字
.gold-text {
font-size: 100px;
font-weight: 900;
color: #ffd700;
text-shadow:
/* 厚度层，从浅金到深金渐变 */
1px 1px 0 #e6c200, 2px 2px 0 #ccad00, 3px 3px 0 #b39800, 4px 4px 0 #998200, 5px 5px 0 #806d00,
/* 投影层，模糊大一点，透明度低点，增加悬浮感 */
6px 6px 15px rgba(0, 0, 0, 0.4),
/* 环境光遮蔽效果 */
10px 10px 30px rgba(0, 0, 0, 0.2);
}
注意层数要够密，特别是厚度部分，最好每 1px 或者每 2px 就一层，避免断层。
真·3D：让文字转起来
text-shadow 是平面 trick。如果需要真正旋转的 3D 文字，需使用 CSS 3D Transform，涉及 transform-style: preserve-3d 和 perspective。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #1a1a2e;
perspective: 1000px;
}
.stage {
transform-style: preserve-3d;
transition: transform 0.5s;
}
.stage:hover {
transform: rotateY(15deg) rotateX(10deg);
}
.real-3d-text {
font-size: 80px;
font-weight: bold;
color: #e94560;
transform-style: preserve-3d;
text-shadow: 1px 1px 0 #c23a51, 2px 2px 0 #a33044, 3px 3px 0 #852538, 4px 4px 0 #661b2b, 5px 5px 20px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="stage">
<h1 class="real-3d-text">我会转！</h1>
</div>
</body>
</html>
perspective 相当于摄像机距离，数值越小透视越强。transform-style: preserve-3d 让子元素在三维空间存在。
实际项目中，更多结合 text-shadow 和轻微的 transform 做出视差效果：
.parallax-text {
font-size: 60px;
transition: all 0.3s ease;
text-shadow: 5px 5px 0px rgba(0,0,0,0.2);
}
.parallax-text:hover {
transform: translate(-5px, -5px);
text-shadow: 10px 10px 0px rgba(0,0,0,0.1), 15px 15px 20px rgba(0,0,0,0.3);
}
常见问题与解决方案
1. 颜色没选对
阴影颜色应从本体颜色延伸。白字用深灰到浅灰，蓝字用深蓝到浅蓝。色相保持一致，只变明度和饱和度。
/* 错误示范 */
.bad-example {
color: #ff0000;
text-shadow: 3px 3px 0 #00ff00;
}
/* 正确渐变 */
.good-example {
color: #e74c3c;
text-shadow: 1px 1px 0 #c0392b, 2px 2px 0 #a93226, 3px 3px 0 #922b21, 4px 4px 10px rgba(0,0,0,0.3);
}
2. 层数太少或间距不对
三层阴影想做出 10px 的厚度会导致断层。层数要多，偏移量要小，5-7 层是性能与效果的平衡点。
3. 字体太细
3D 效果需要体积。至少要用 normal（400）或者 bold（700），最好是粗壮的黑体、圆体。英文可用 Impact、Arial Black。
4. 背景色和阴影撞色
深色文字加深色阴影放在深色背景上会隐身。确保对比度足够。
浏览器兼容性处理
text-shadow 兼容性不错，IE10 以上支持。主要问题在于多层阴影的渲染差异。
稳妥起见，准备降级方案：
.modern-text {
font-size: 60px;
color: #fff;
/* 基础阴影，所有浏览器都认 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
/* 高级效果，不支持的就拉倒 */
text-shadow: 1px 1px 0 #ddd, 2px 2px 0 #bbb, 3px 3px 0 #999, 4px 4px 0 #777, 5px 5px 15px rgba(0,0,0,0.3);
}
移动端 Retina 屏可能需要调整偏移量：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.text {
text-shadow: 2px 2px 0 #999;
}
}
动画效果
静态 3D 已不够吸引人，可添加微交互。
鼠标悬停
.interactive-text {
font-size: 80px;
font-weight: bold;
color: #fff;
text-shadow: 0px 0px 0 #2980b9, 0px 0px 0 #2573a7, 0px 0px 0 #216694, 0px 0px 0 #1d5982, 0px 0px 0 rgba(0,0,0,0);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.interactive-text:hover {
transform: translateY(-10px);
text-shadow: 1px 1px 0 #2980b9, 2px 2px 0 #2573a7, 3px 3px 0 #216694, 4px 4px 0 #1d5982, 5px 15px 20px rgba(0,0,0,0.4);
}
自动浮动
@keyframes float {
0%, 100% {
transform: translateY(0);
text-shadow: 1px 1px 0 #2980b9, 2px 2px 0 #2573a7, 3px 3px 0 #216694, 4px 4px 0 #1d5982, 5px 5px 15px rgba(0,0,0,0.3);
}
50% {
transform: translateY(-20px);
text-shadow: 1px 1px 0 #2980b9, 2px 2px 0 #2573a7, 3px 3px 0 #216694, 4px 4px 0 #1d5982, 5px 25px 30px rgba(0,0,0,0.2);
}
}
.floating-text {
font-size: 80px;
color: #fff;
animation: float 3s ease-in-out infinite;
}
原则：能 transform 就不动 shadow，必须动 shadow 时减少层数以保性能。
字体选择与加载
推荐使用 Web Fonts (@font-face) 加载网络字体。
@font-face {
font-family: 'CoolFont';
src: url('cool-font.woff2') format('woff2');
font-weight: bold;
font-display: swap;
}
.cool-3d-text {
font-family: 'CoolFont', 'Microsoft YaHei', sans-serif;
}
推荐免费商用字体：优设标题黑、站酷快乐体、思源黑体 Heavy、Montserrat Black 等。注意中文字体文件较大，可使用裁剪工具减小体积。
调试技巧
- 眯眼观察法：离屏幕远一点眯眼看整体轮廓，检查对比度。
- 临时加边框：
.debug-mode { outline: 2px solid red !important; background: rgba(255, 0, 0, 0.1) !important; } - 图层分析：Chrome DevTools -> More tools -> Layers 查看页面图层树。
综合示例
以下是一个完整的 HTML 示例，包含多种风格及响应式适配：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3D 文字终极示例</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
overflow-x: hidden;
}
.emboss {
font-size: 80px;
font-weight: 900;
color: #f0f0f0;
margin: 20px;
text-shadow: -2px -2px 2px rgba(255,255,255,0.8), 2px 2px 2px rgba(0,0,0,0.2);
}
.floating {
font-size: 100px;
font-weight: bold;
color: #fff;
margin: 20px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-shadow: 1px 1px 0 #e0e0e0, 2px 2px 0 #d0d0d0, 3px 3px 0 #c0c0c0, 4px 4px 0 #b0b0b0, 5px 5px 0 #a0a0a0, 6px 6px 15px rgba(0,0,0,0.3);
}
.floating:hover {
transform: translate(-6px, -6px);
text-shadow: 1px 1px 0 #e0e0e0, 2px 2px 0 #d0d0d0, 3px 3px 0 #c0c0c0, 4px 4px 0 #b0b0b0, 5px 5px 0 #a0a0a0, 12px 12px 25px rgba(0,0,0,0.4);
}
.neon {
font-size: 90px;
font-weight: bold;
color: #fff;
margin: 20px;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de, 5px 5px 0 rgba(0,0,0,0.5);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.retro {
font-size: 70px;
font-weight: 900;
color: #2c3e50;
margin: 20px;
letter-spacing: 5px;
text-transform: uppercase;
text-shadow: 3px 3px 0 #e74c3c, 6px 6px 0 #f39c12, 9px 9px 0 #27ae60, 12px 12px 0 #3498db, 15px 15px 0 #9b59b6, 18px 18px 20px rgba(0,0,0,0.2);
}
@media(max-width: 768px) {
.emboss, .floating, .neon, .retro { font-size: 40px; }
}
@media(prefers-color-scheme: dark) {
body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
}
</style>
</head>
<body>
<h1 class="emboss">凹陷文字</h1>
<h1 class="floating">悬浮立体</h1>
<h1 class="neon">霓虹闪烁</h1>
<h1 class="retro">Colorful</h1>
<script>
console.log('%c CSS 3D 文字效果 ', 'background: #667eea; color: white; font-size: 20px; padding: 10px; border-radius: 5px; text-shadow: 2px 2px 0 rgba(0,0,0,0.2)');
</script>
</body>
</html>
该示例展示了浮雕、悬浮、霓虹、复古四种风格，并包含响应式适配和暗色模式支持。
