倒影文字 · 文字
前端Wiki/CSS 特效合集/倒影文字

倒影文字

文字下方自带渐隐倒影,像放在水面上

← 返回 文字 类特效列表
REFLECTION
REFLECTION

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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%)}

HTML 结构

HTML
<div class="fx">
<div class="refl"><div class="up">REFLECTION</div><div class="down">REFLECTION</div></div>
</div>
实现要点:倒影 = scaleY(-1) 翻转 + mask 渐隐遮罩

其它文字类特效

回到 前端Wiki 首页 · CSS 特效合集