文字立起效果

刀刀

1/3/2025

0 字

0 分钟

效果展示

思路分析

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

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

总体效果