文字立起效果

作者:Yuan Tang

更新于:5 个月前

字数统计:168 字

阅读时长:1 分钟

效果展示

思路分析

这个效果无法用文字阴影和盒子阴影来实现，只能通过元素来实现效果。步骤如下：

1. ::after 伪元素设置绝对定位
2. 偏移适量距离，旋转适当角度，Y轴压缩，实现阴影效果
3. 层级设置为 -1 避免压到文字
4. 通过 filter 的 blur 属性实现模糊效果
5. 使用 mask 属性实现渐变效果

代码实现

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;
}

Contributors

Yuan Tang