大家好，我是喝西瓜汁的兔叽，今天给大家分享一个常见的文字投影效果。
效果展示
我们来实现一个这样的文字效果。
思路分析
这样的效果如何实现的呢?
实际上是两组相同的文字，叠合在一块，只不过对应的css不同罢了。
首先，body设置为灰色。
我们分两个元素，一个是文字，一个是倒影。
文字我们设置为白色，加粗。
最重要的就是，投影部分，投影元素我们使用绝对定位让和原文字重合，之后设置投影倾斜，偏移到合适位置，这些使用css3中的tranform即可。
最后我们加上模糊和文字蒙版即可。
filter:blur(5px);
mask:linear-gradient(to bottom, transparent 0%, black 100%);
完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字投影效果</title><style>body {background: #aaa;}.greet {font-size: 120px;font-weight: bold;color: #fff;text-align: center;margin: 200px auto;position: relative;}.greet::before {content: 'DARKNESS';position: absolute;color: #000;transform: translate(-46px, 12px) skew(50deg) scaleY(0.7);z-index: -1;font-weight: bold;/* 模糊 */filter: blur(5px);/* 给文字加上渐变蒙版 */mask: linear-gradient(to bottom, transparent 0%, black 100%);}</style>
</head><body><div class="greet">DARKNESS</div></body></html>
好啦，以上就结束啦，大家如果感兴趣可以去学习一下cssmask属性哦~
朋友，我是喝西瓜汁的兔叽，感谢您的阅读，衷心祝福您和家人身体健康，事事顺心。
函数的使用问题)
)
)
)