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

【css酷炫效果】纯CSS实现文字立体投影效果

news 2025/7/4 12:04:40

【css酷炫效果】纯CSS实现文字立体投影效果

缘
创作背景
html结构
css样式
完整代码
效果图

想直接拿走的老板，链接放在这里：上传后更新

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<div class="text-3d">3D文字投影效果</div>

css样式

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

        .text-3d {
            font-size: 48px;
            color: #ff0808;
            text-align: center;
            text-shadow: 
                1px 1px 2px rgba(0, 0, 0, 0.2),
                2px 2px 4px rgba(0, 0, 0, 0.2),
                3px 3px 6px rgba(0, 0, 0, 0.2),
                4px 4px 8px rgba(0, 0, 0, 0.2),
                5px 5px 10px rgba(0, 0, 0, 0.2);
        }

完整代码

<!DOCTYPE html>
<html lang="en"> 
<head>

<title>页面特效</title>
<style type="text/css">
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

        .text-3d {
            font-size: 48px;
            color: #ff0808;
            text-align: center;
            text-shadow: 
                1px 1px 2px rgba(0, 0, 0, 0.2),
                2px 2px 4px rgba(0, 0, 0, 0.2),
                3px 3px 6px rgba(0, 0, 0, 0.2),
                4px 4px 8px rgba(0, 0, 0, 0.2),
                5px 5px 10px rgba(0, 0, 0, 0.2);
        }
</style>

</head>
<body>
    <div class="text-3d">3D文字投影效果</div>

</body>
</html>