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

3D 文字效果是网页设计世界中最常用的文字效果之一。作为设计师或前端开发人员，应该知道如何创建 3D 文本效果。今天，我们将研究以 3D 外观创建文本的最简单方法之一。

方法： 3D文字动画效果是通过text-shadow属性设计的。应用多个文本阴影的原因是为了提供 3D 外观，就好像我们只应用单个(或单一)文本阴影一样，它对于单词中存在的所有字母都是相同的。但是对于 3D 效果，我们希望每个字母和每个角度(基本上是 X 和 Y 坐标以及模糊半径)的阴影厚度不同。现在让我们看看上述方法的实现。

HTML 代码：在本节中，我们使用了

标签，其中包含要应用 3D 效果的单词。

  

    
    
    

  

    
GeeksforGeeks

  

CSS 代码：

• 步骤 1：我们所做的第一件事是将

  元素对齐到中心并提供主体 bcakground。

• 第 2 步：现在，对 h1 元素应用过渡。持续时间可以根据您的需要进行调整。
• 第 3 步：现在在 h1 元素上应用文本阴影。应用多个文本阴影的概念已经在文章开头的方法中进行了解释。

提示：我们必须选择应用仅在鼠标悬停时可见的效果，但如果您希望效果始终可见，请移除悬停选择器。

完整代码：在本节中，我们将结合以上两个部分来创建鼠标悬停时的 3D 文本动画效果。

  

    
    
    
  
    

  

    
GeeksforGeeks

  

输出：