如何使用 HTML 和 CSS 创建多层文本效果？

多层文字效果是网页设计世界中最常用的文字效果之一。作为设计师或前端开发人员，应该知道如何创建多层文本效果。今天我们将研究一种最简单易行的方法来创建多层文本效果。
方法：为了实现这种文本效果，我们将使用text-shadow属性。同样的方法也用于使用 HTML 和 CSS 创建 3D 文本效果。正如文章中提到的， CSS text-shadow属性的美妙之处在于该属性可以多次应用于具有不同厚度、颜色和角度的同一个 HTML DOM元素，以实现 3D 外观或多层文本效果.

使用 CSS 的双层文本效果中也介绍了类似的方法。在本教程中，我们将仅使用 HTML 和 CSS 为网站实现多层文本效果。我们假设您熟悉HTML和CSS规则，并且对 CSS text-shadow属性有基本的了解。

• 第 1 步：使用npm安装Browsersync 。我们将使用Browsersync启动服务器并提供 URL 以查看 HTML 站点、CSS 动画和加载相应的 JavaScript 文件。我们将在全球安装 Browsersync。

npm install -g browser-sync

• 第 2 步：在您的项目根文件夹中创建一个index.html文件和一个index.css 文件。
  index.html：在该文件中添加以下代码段：

html

    
    


    
    
Multilayered Text Effect using CSS
    
Hello Geeks

• 第 3 步：使用 CSS，我们将div元素与屏幕中心对齐，并提供了一些初始背景样式。如上所述，我们简单地使用了CSS 的 text-shadow属性来应用如上所述的多层文本效果。我们已将文本效果的每一层都设为可区分的颜色，以便它是可见的。我们可以简单地添加 CSS悬停属性来激活此文本效果，同时将鼠标悬停在 HTML div标签上。
  索引.css：

CSS

div {
    font-size: 12rem;
    text-align: center;
    height: 90vh;
    line-height: 90vh;
    color: green;
    background: white;
    font-family: "Times New Roman", Times, serif;
    font-weight: 700;
    text-shadow: 5px 5px 0px #eb452b, 
                 10px 10px 0px #efa032, 
                 15px 15px 0px #46b59b, 
                 20px 20px 0px #017e7f, 
                 25px 25px 0px #052939, 
                 30px 30px 0px blue, 
                 35px 35px 0px violet, 
                 40px 40px 0px black;
}

• 第 4 步：要使用 Browsersync 启动应用程序，请在项目目录中运行以下命令：

browser-sync start --server --files "*"

输出：这会在服务器模式下启动 Browsersync 并监视目录中的所有文件是否有*通配符指定的更改。默认情况下，应用程序将在http://localhost:3000/ 上启动。