css

当前位置:首页 > 前端 > css

css 文字渐变色 渐变

<div class="Number"> <div class="NumberItem"> <h1><span class="counter">2012</span></h1> <h2>公司成立...
<div class="Number">
        <div class="NumberItem">
          <h1><span class="counter">2012</span></h1>
          <h2>公司成立时间</h2>
        </div>
        <div class="NumberItem">
          <h1><span class="counter">15</span>+</h1>
          <h2>网站建设经验</h2>
        </div>
        <div class="NumberItem">
          <h1><span class="counter">300</span>+</h1>
          <h2>全国服务网络</h2>
        </div>
        <div class="NumberItem">
          <h1><span class="counter">1000</span>+</h1>
          <h2>全国团队成员</h2>
        </div>
        <div class="NumberItem">
          <h1><span class="counter">70000</span>+</h1>
          <h2>全国已服务客户</h2>
        </div>
</div>
    
    
    
/* css */

    .Number {
        border-top: 1px solid #ffffff80;
        position: absolute;
        z-index: 2;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .NumberItem {
        padding: 30px 0;
    }

    .NumberItem h1 {
        font-family: 'Impact';
        font-weight: 100;
        font-size: 40px;
        line-height: 1;
        background: linear-gradient(242.13deg, #FFFFFF 19.52%, #997C65 95.78%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        display: flex;
    }

    .NumberItem h1 span {
        font-family: 'Impact';
        font-weight: 100;
        font-size: 40px;
    }

    .NumberItem h2 {
        margin-top: 10px;
        font-weight: bold;
        font-size: 16px;
        line-height: 1;
        background: linear-gradient(245.45deg, #FFFFFF 8.2%, #997C65 99.64%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }

    @media (max-width: 720px) {
        .Number {
            position: relative;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        .NumberItem {
            width: 33%;
            padding: 15px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .NumberItem h1,
        .NumberItem h2 {
            background: linear-gradient(242.13deg, #fbd48a 19.52%, #997C65 95.78%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
    }

    @media (max-width: 460px) {
        .NumberItem {
            width: 50%;
        }

        .NumberItem h1,
        .NumberItem h1 span {
            font-size: 28px;
        }
    }


上一篇:css 文字 渐变色 阴影色

下一篇:已经是最后一篇

相关内容

文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~