📌  相关文章
📜  如何使用 HTML 和 CSS 创建多层文本效果?

📅  最后修改于: 2021-08-31 07:56:38             🧑  作者: Mango

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

使用 CSS 的双层文本效果中也介绍了类似的方法。在本教程中,我们将仅使用 HTML 和 CSS 为网站实现多层文本效果。我们假设您熟悉HTMLCSS规则,并且对 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

    GeeksForGeeks
    


    GeeksForGeeks
    

Multilayered Text Effect using CSS

    
Hello Geeks


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;
}


  • 第 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/ 上启动。