大家好，我是喝西瓜汁的兔叽，今天给大家分享一个常见的文字投影效果。
效果展示
我们来实现一个这样的文字效果。
思路分析
这样的效果如何实现的呢?
实际上是两组相同的文字，叠合在一块，只不过对应的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属性哦~
朋友，我是喝西瓜汁的兔叽，感谢您的阅读，衷心祝福您和家人身体健康，事事顺心。