多层文字阴影堆出立体厚度，悬停上浮阴影拉长
← 返回 文字 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .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,text-shadow .25s}
.fx .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)}
.fx{background:#33415e;border-radius:10px}<div class="fx">
<div class="float3d">3D 悬浮文字</div>
</div>