3D 立体文字特效（凸起/凹陷/悬停弹出 CSS 源码）

效果演示（真实可交互）

下方依次是立体凸起字、凹陷压印字、以及悬停会透视倾斜弹起的 3D 字。第三行请把鼠标放上去体验弹出效果。

完整代码

HTML 结构：

<p class="td td-extrude">立体凸起</p>
<p class="td td-press">凹陷压印</p>
<p class="td td-pop">悬停弹出 3D</p>

核心 CSS：凸起字的关键是每下一层阴影都向右下偏移一点，堆出厚度：

/* ① 立体凸起：6 层阴影逐级堆叠 */
.td-extrude {
  color: #6c8cff;
  text-shadow:
    1px 1px 0 #5a7bf0,
    2px 2px 0 #4d6fe0,
    3px 3px 0 #4163d0,
    4px 4px 0 #3557c0,
    5px 5px 0 #294bb0,
    6px 6px 0 #1d3fa0,   /* 层数越多厚度越明显 */
    8px 10px 18px rgba(0, 0, 0, .45);  /* 底部投影 */
}

/* ② 凹陷压印：下方高光 + 上方暗影 */
.td-press {
  color: #3a4256;
  text-shadow:
    0 1px 0 #f2f5ff,                /* 底部高光 */
    0 -1px 2px rgba(0, 0, 0, .6);   /* 顶部暗影 */
}

/* ③ 悬停弹出：透视倾斜 + 阴影加深 */
.td-pop {
  transform: perspective(600px) rotateX(0deg);
  transition: transform .3s ease, text-shadow .3s ease;
  text-shadow: 2px 2px 0 #4d6fe0, 4px 4px 0 #3557c0, 8px 8px 20px rgba(0, 0, 0, .4);
}
.td-pop:hover {
  transform: perspective(600px) rotateX(18deg) translateY(-4px) scale(1.05);
  text-shadow: 2px 2px 0 #4d6fe0, 5px 5px 0 #3557c0, 12px 14px 26px rgba(0, 0, 0, .5);
}

参数说明

兼容性与性能

• 纯 CSS 实现，text-shadow 与 transform 均为现代浏览器长期支持的特性
• 多层阴影对合成层有一定压力，大字标题建议控制在 8 层以内；静态展示无动画时开销可忽略
• perspective() 直接写在 transform 中，比父容器 perspective 更独立，适合单元素使用
• 凹陷压印效果对背景亮度敏感，浅色背景上需要调暗文字色才能看出凹感

常见问题

Q: 想换成别的颜色？ 改 color 与每层阴影色即可，规律是每往下堆一层颜色加深一档（如 #6c8cff 到 #1d3fa0）。

Q: 立体字能加动画吗？ 可以，比如让 rotateX 缓慢摆动模拟呼吸感；悬停弹出形态已经演示了 transform 动画的用法。

Q: 汉字和英文效果一样吗？ 基本一致，笔画复杂的汉字在层数多时更显厚重，建议中文用 4-6 层即可。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。