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

htmlcssweb developmentfront end technology更新于 2025/3/21 10:20:17

在网页设计领域，3D 文字效果是最流行的文字效果之一。设计师或前端开发人员应该能够创建 3D 文字效果。今天，我们将探讨一种最简单、最直接的 3D 文字渲染技术。

text-shadow 属性赋予了 3D 文字运动效果的设计灵感。应用多个 text-shadow 属性的目的是赋予单词 3D 外观，因为如果我们只应用一个(或单一)text-shadow 属性，那么单词中所有字母的 3D 效果都将相同。然而，为了创建 3D 效果，我们需要为每个字母和角度(本质上是 X 和 Y 坐标以及模糊半径)设置不同的阴影厚度。

让我们深入研究本文，以便更好地了解如何使用 HTML 和 CSS 创建 3D 文本效果。

使用 text-shadow 属性

顾名思义，此 CSS 属性用于为文本添加阴影。它接受应用于文本的阴影列表，以逗号分隔。其默认设置为无。它将一个或多个文本阴影效果应用于元素的文本内容。

语法

以下是 CSS 文本阴影属性的语法。

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

现在，让我们查看以下示例，以了解更多关于使用 HTML 和 CSS 创建 3D 文本效果的想法。

示例

让我们看看下面的示例，我们将在其中为文本添加简单的 3D 效果。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: #D1F2EB;
      }

      h1 {
         margin: 250px auto;
         text-align: center;
         color: #17202A;
         font-size: 60px;
         transition: 1.0s;
         font-family: verdana;
      }

      h1:hover {
         text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A,
         0 7px 0 #17202A, 0 8px 0 #17202A,
         0 11px 0 #17202A, 0 12px 0 #17202A;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
</body>
</html>

运行上述代码后，输出窗口将弹出，在网页中央显示已应用背景的文本。当用户尝试将光标移到文本上时，文本将呈现悬停效果并显示 3D 文本。

示例

请考虑以下示例，我们将在网页上创建 3D 跑马灯效果。

<!DOCTYPE html>
<html>
<head>
   <style>
      .tutorial {
         display: flex;
      }

      .tutorial .inner {
         width: 300px;
         height: 220px;
         line-height: 240px;
         font-size: 100px;
         font-family: verdana;
         white-space: nowrap;
         overflow: hidden;
      }

      .tutorial .inner:first-child {
         background-color: #ABEBC6;
         color: #6C3483;
         transform-origin: right;
         transform: perspective(110px) rotateY(-16deg);
      }

      .tutorial .inner:last-child {
         background-color: #D7DBDD;
         color: #1E8449;
         transform-origin: left;
         transform: perspective(50px) rotateY(16deg);
      }

      .tutorial .inner span {
         position: absolute;
         animation: marquee 5s linear infinite;
      }

      .tutorial .inner:first-child span {
         animation-delay: 1.5s;
         left: -100%;
      }

      @keyframes marquee {
         from {
            left: 100%;
         }

         to {
            left: -100%;
         }
      }
   </style>
</head>
<body>
   <div class="tutorial">
      <div class="inner">
         <span>T P</span>
      </div>
      <div class="inner">
         <span>Tutorials</span>
      </div>
   </div>
</body>
</html>

代码执行后，将生成一个显示在网页上的 3D 招牌效果输出。

示例

接下来，我们将在网页上制作发光的 3D 效果。

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         animation: glow 10s ease-in-out infinite;
      }

      figure {
         animation: wobble 5s ease-in-out infinite;
         transform-origin: center center;
         transform-style: preserve-3d;
      }

      @keyframes wobble {

         0%,
         100% {
            transform: rotate3d(2, 2, 0, 45deg);
         }

         25% {
            transform: rotate3d(-3, 3, 0, 50deg);
         }

         50% {
            transform: rotate3d(-2, -4, 0, 42deg);
         }
      }

      h1 {
         width: 100%;
         padding: 42px;
         font: 100px 'Concert One', verdana;
         text-transform: uppercase;
         position: absolute;
         color: #1E8449;
      }

      @keyframes glow {

         0%,
         100% {
            text-shadow: 0 0 40px #7D3C98;
         }

         25% {
            text-shadow: 0 0 45px #DFFF00;
         }

         50% {
            text-shadow: 0 0 50px #DE3163;
         }

         75% {
            text-shadow: 0 0 55px #40E0D0;
         }
      }
   </style>
</head>
<body>
   <figure>
      <h1>WELCOME</h1>
   </figure>
</body>
</html>

运行上述程序后，将弹出输出窗口，在网页上显示 3D 文本，并且文本具有发光效果。