mask 实现文字立起效果
刀刀
0字
0分钟
2026/8/16
CSS 效果展示
CSS 思路分析
该效果无法用文字阴影和盒子阴影实现，只能通过元素实现。步骤如下：
::after伪元素设置绝对定位- 偏移适量距离，旋转适当角度，Y 轴压缩，实现阴影效果
- 层级设置为 -1 避免压到文字
- 通过
filter的blur属性实现模糊效果 - 使用
mask属性实现渐变效果
CSS 代码实现
css
div {
position: relative;
font-size: 20px;
}
div::after {
content: 'Hello vue3';
position: absolute;
top: 0;
left: 0;
color: #000;
transform: translate(-14px, 8px) scaleY(0.5) skew(40deg);
mask: linear-gradient(transparent, #000);
z-index: -1;
}CSS 总体效果
跳转预览：点击跳转
贡献者
duyidao
v_duyilin 刀刀