文字投影效果

发布于:2025-02-10 ⋅ 阅读:(84) ⋅ 点赞:(0)

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

效果展示

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

在这里插入图片描述

思路分析

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

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


朋友,我是喝西瓜汁的兔叽,感谢您的阅读,衷心祝福您和家人身体健康,事事顺心。


网站公告

今日签到

点亮在社区的每一天
去签到