h5中文字渐变的另一种实现方式

风清云淡_A

于 2024-08-19 10:30:38 发布

阅读量67

点赞数 2

分类专栏：移动端文章标签：前端

本文链接：https://blog.csdn.net/qq_27702739/article/details/141316470

版权

移动端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

为了丰富页面细节，设计师可能会给文字添加渐变来美化页面，如下图，旧web时代，这种渐变文字就得靠切图来实现，制作成图片，这样引入，实在是不方便。万一要更改内容，又要设计再出一张图进行替换。

实现效果

在这里插入图片描述

代码实现

<div class="box">
      <h2>This is 1st paragraph.</h2>
      <h3>This is 2nd paragraph.</h3>
      <p>element</p>
    </div>

.box {
        text-align: center;
        background: linear-gradient(to  right, #9cf39c 30%, #ffff00 20%,#9cf39c 50%, #e8e8e8 80%);
        background-clip: text;
        -webkit-background-clip: text;
        color:transparent;
        font-family: 'Modern Antiqua', cursive;
      }
      h2{
        font-size: 50px;
        margin: 10px auto;
      }
      h3{
        font-size: 30px;
        margin: 10px auto;
      }
      p{
        font-size: 24px;
      }