文字阴影悬浮
文字阴影悬浮：默认文字有淡淡阴影，悬停时阴影变长变模糊，配合 translateY 上移，形成“浮起来”的立体感。text-shadow 可叠加多层制造 3D 厚度。
3D 文字做法：用多层 text-shadow 每层向下偏移 1px 颜色渐深（如 #aaa,#999,#888…），看起来像有厚度的立体字；加 transition 就是“浮起 3D 字”。
- text-shadow: x y 模糊 颜色，可叠加多层
- 3D 厚度 = 多层 1px 阴影堆叠（逐层颜色变深）
- 悬停放大阴影 + 上移 = 经典悬浮文字
HTML
<style> .float3d { text-align: center; font-size: 52px; font-weight: 800; margin: 50px 0; color: #fff; cursor: pointer; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 8px rgba(0,0,0,.3); transition: transform .25s ease, text-shadow .25s ease; } .float3d:hover { transform: translateY(-6px); text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 6px 20px rgba(0,0,0,.45); } body { background: #f6f8fa; } </style> <div class="float3d">3D 悬浮文字</div>
本节要点多层 text-shadow 堆 1px 偏移 = 3D 厚度；悬停上移 + 阴影拉长 = 悬浮。
