当前位置：首页 > article >正文

文字投影效果

article 2025/2/3 18:18:36

大家好，我是喝西瓜汁的兔叽，今天给大家分享一个常见的文字投影效果。

效果展示

我们来实现一个这样的文字效果。

在这里插入图片描述

思路分析

这样的效果如何实现的呢?

实际上是两组相同的文字，叠合在一块，只不过对应的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>