纯 CSS 实现 3D 文字效果实战教程

纯 CSS 实现 3D 文字效果实战教程 | 极客日志

纯 CSS 实现 3D 文字效果实战教程

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,    ,    ,    ,    (,,,);
        }
    


    
        我会转！

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  ,    (,,,);
}

自动浮动

@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,);
    }
}
 {
    : ;
    : ;
    : float  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%); }
        }
    


    凹陷文字
    悬浮立体
    霓虹闪烁
    Colorful

该示例展示了浮雕、悬浮、霓虹、复古四种风格，并包含响应式适配和暗色模式支持。

最终效果展示

纯 CSS 实现 3D 文字效果实战教程