文字下方自带渐隐倒影,像放在水面上
← 返回 文字 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .refl{text-align:center;margin:36px 0}
.fx .refl .up{font-size:46px;font-weight:800;color:#fff}
.fx .refl .down{font-size:46px;font-weight:800;color:#fff;transform:scaleY(-1) translateY(-6px);opacity:.6;-webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}<div class="fx">
<div class="refl"><div class="up">REFLECTION</div><div class="down">REFLECTION</div></div>
</div>