以前弄得，分享一下
效果
知识点
利用多重文本阴影，调整偏移量达到视觉效果
代码
body {
height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
background: #167c80;
user-select: none;
}
#text {
font-size: 16vw;
font-family: AudioWide, LiSu, sans-serif;
color: #fff;
transform: rotate(-20deg) skew(20deg);
text-align: center;
position: relative;
&::before {
--offset: 32px;
content: attr(data-text);
position: absolute;
left: calc(var(--offset) * -1);
top: var(--offset);
color: rgba(0, 0, 0, 0.3);
filter: blur(5px);
text-shadow: none;
z-index: -1;
}
}
font-size 使用 vw 单位，为了让其自自适应大小；使用filter 中的模糊滤镜为了让阴影不生硬；
<p id="text" data-text="LINUX.DO">
LINUX.DO
</p>
为了方便添加多重阴影，直接用js生成了，如果喜欢手写也不是不可以 
let text = document.getElementById('text');
/**
* 生成阴影
* @param {number} count 阴影层数
* @param {string} color 阴影颜色
* @returns {string} 阴影样式
*/
function GenShadow(count = 20, color = '#ddd') {
let shadow = '';
for (let i = 0; i < count; i++) {
shadow += `${shadow ? ',' : ''}${-i * 1}px ${i * 1}px 0 ${color}`
}
return shadow;
}
text.style.textShadow = GenShadow(24);
也可以直接在 CODEPEN 查看
