CSS打造简单的立体文字效果

效果展示

本文摘要

        本文介绍使用CSS实现立体文字效果的方法。通过HTML设置h1元素显示文字，再利用CSS伪元素复制文字内容，通过transform属性应用倾斜(sk帝g)、缩放(scale)imet tau)和位移(translate)变换。关键技巧包括：使用absolute定位重叠元素，z-index控制层级，filter添加模糊效果，以及mask渐变增强立体感。最终效果通过伪元素的变形和样式调整，在主文字后方形成阴影投射般的立体视觉效果。

1.实现

1.1HTML

        HTML 结构中需要包含一个 h1 元素，用于显示主文字内容。CSS 负责通过伪元素创建立体阴影效果。

<body>
    <div>
        <h1>立体文字效果</h1>
    </div>
</body>

1.2主要CSS

        使用 :after 伪元素复制文字内容，通过绝对定位使其与主文字重叠，并应用变形和滤镜效果。

transform 属性组合了三种变形效果：

  • skew(60deg) 使阴影倾斜 60 度

  • scale(1, 0.5) 在 Y 轴方向压缩为原高度的一半

  • translate(-100px, 53px) 调整阴影位置

filter: blur(5px) 为阴影添加模糊效果，mask 属性通过渐变控制阴影的透明度分布，增强立体感。

h1:after{
    content: '立体文字效果';
    position: absolute;
    left: 0px;
    transform:skew(60deg) scale(1,0.5) translate(-100px,53px);
    z-index: -1;
    filter: blur(5px);
    color: rgb(7, 7, 7);
    mask: linear-gradient(transparent,black);
}

2.完整代码

        以下代码可直接运行，展示完整的立体文字效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div{
            position: relative;
        }
        h1{
            font-size: 140px;
            font-weight: 500;
            color: rgb(13, 14, 13);
        }
        h1:after{
            content: '立体文字效果';
            position: absolute;
            left: 0px;
            transform:skew(60deg) scale(1,0.5) translate(-100px,53px);
            z-index: -1;
            filter: blur(5px);
            color: rgb(7, 7, 7);
            mask: linear-gradient(transparent,black);
        }

    </style>
</head>
<body>
    <div>
        <h1>立体文字效果</h1>
    </div>
</body>
</html>
var code=e413d425-a4a4-48f1-aec1-aa6f7ac2f9f8


 

posted @ 2025-10-02 20:27  Oblique  阅读(0)  评论(0)    收藏  举报  来源