使用HTML和CSS创建3D文字效果

在本节中，我们将<h1>标记与要对其应用3D效果的单词一起使用。

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

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content=

        "width=device-width, initial-scale=1.0" />

    <title>3D Text Effect</title>

</head>

<body>

    <h1>GeeksforGeeks</h1>

</body>

</html>

css：

步骤1：我们要做的第一件事是将<h1>元素对齐到居中并提供主体bcakground。步骤2：现在，将过渡应用于h1元素。持续时间可以根据您的需要进行调整。步骤3：现在在h1元素上应用文本阴影。在本文开头的方法中已经说明了应用多个文本阴影的概念。

提示：我们必须选择将一种效果仅在鼠标悬停时可见，但是如果您希望该效果始终可见，请删除悬停选择器。

<style>

    body {

        background: green;

    }

    h1 {

        margin: 300px auto;

        text-align: center;

        color: white;

        font-size: 8em;

        transition: 0.5s;

        font-family: Arial, Helvetica, sans-serif;

    }

    h1:hover {

        text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc,

                     0 3px 0 #ccc, 0 4px 0 #ccc,

                     0 5px 0 #ccc, 0 6px 0 #ccc,

                     0 7px 0 #ccc, 0 8px 0 #ccc,

                     0 9px 0 #ccc, 0 10px 0 #ccc,

                     0 11px 0 #ccc, 0 12px 0 #ccc,

                     0 20px 30px rgba(0, 0, 0, 0.5);

    }

</style>

效果：