1. <p id="jjgzy"><strong id="jjgzy"><small id="jjgzy"></small></strong></p>

      1. <table id="jjgzy"></table>
        <object id="jjgzy"><nav id="jjgzy"></nav></object>

        一站式百度SEO排名優化!-找老劉SEO 低投入,高轉化,精益求精、一絲不茍:旨在提供更好的SEO服務!

        首頁>>老劉專欄

        css文字漸變色_css文字顏色漸變的3種實現方式

        首頁 2022-09-06 老劉專欄 232 ℃Tags:


        在web前端開發過程中,UI設計師經常會設計一些帶漸變文字的設計圖,在以前我們只能用png的圖片來代替文字,今天可以實現使用純css實現漸變文字了。下面就介紹3中實現方式供大家參考!

        image.png

        基礎樣式:


        .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

        第一種方法,使用 background-cli、 text-fill-color:

        .gradient-text-one{
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }

        說明 :

        background: -webkit-linear-gradient(...) 為文本元素提供漸變背景。

        webkit-text-fill-color: transparent 使用透明顏色填充文本。

        webkit-background-clip: text 用文本剪輯背景,用漸變背景作為顏色填充文本。

        第二種方法,使用 mask-image:

        .gradient-text-two{
           color:red;
        }
        .gradient-text-two[data-content]::after{
            content:attr(data-content);
            display: block;
            position:absolute;
            color:yellow;
            left:0;
            top:0;
            z-index:2;
            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
        }

        說明:

        mask-image 和 background-image 一樣,不僅可以取值是 圖片路徑,也可以是漸變色。

        第三種方法,使用 linearGradient、fill:

        .gradient-text-three{
            fill:url(#SVGID_1_);
            font-size:40px;
            font-weight:bolder;
        }
        <svg viewBoxs="0 0 500 300" class="svgBox">
            <defs>
                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                    <stop  offset="0" style="stop-color:yellow"/>
                    <stop  offset="0.5" style="stop-color:#fd8403"/>
                    <stop  offset="1" style="stop-color:red"/>
                </linearGradient>
            </defs>
            <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年華</text>
        </svg>

        說明:

        在SVG中,有兩種主要的漸變類型:

        線性漸變(linearGradient)

        放射性漸變(radialGradient)

         SVG中的漸變不僅可以用于填充圖形元素,還可以填充文本元素


        dom示例:

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <title>css3漸變字體</title>
            <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <style type="text/css">
                *{margin:0;padding:0;}
                body,html{width:100%;height:100%;}
                .wrapper{width:80%;margin:0 auto;margin-top:30px;}
                .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
                .gradient-text-one{
                    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
                    -webkit-background-clip:text;
                    -webkit-text-fill-color:transparent;
                }
                .gradient-text-two{
                    color:red;
                }
                .gradient-text-two[data-content]::after{
                    content:attr(data-content);
                    display: block;
                    position:absolute;
                    color:yellow;
                    left:0;
                    top:0;
                    z-index:2;
                    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
                }
                .gradient-text-three{
                    fill:url(#SVGID_1_);
                    font-size:40px;
                    font-weight:bolder;
                }
            </style>
        </head>
        <body>
            <section class="wrapper">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
                    </div>
                    <div class="panel-body">
                        <h3 class="gradient-text gradient-text-one">花樣年華</h3>
                    </div>
                </div>
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">方法2. mask-image</h3>
                    </div>
                    <div class="panel-body">
                        <h3 class="gradient-text gradient-text-two" data-content="豆蔻年華">豆蔻年華</h3>
                    </div>
                </div>
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title">方法3. svg linearGradient</h3>
                    </div>
                    <div class="panel-body">
                        <svg viewBoxs="0 0 500 300" class="svgBox">
                            <defs>
                                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                                    <stop  offset="0" style="stop-color:yellow"/>
                                    <stop  offset="0.5" style="stop-color:#fd8403"/>
                                    <stop  offset="1" style="stop-color:red"/>
                                </linearGradient>
                            </defs>
                            <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年華</text>
                        </svg>
                    </div>
                </div>
            </section>
        </body>
        </html>

        效果如下:

        image.png

        搜索
        分類
        熱門標簽
      2. 首頁
      3. 電話
      4. QQ
      5. ?
        聯系老劉手機
        1043025812
        聯系老劉微信
        掃描微信二維碼
        欧美激情一区二区|国产精品亚洲日韩欧美色窝窝色欲|亚洲jiZZjiZZ妇|国产精品白丝Jk黑袜喷水视

        1. <p id="jjgzy"><strong id="jjgzy"><small id="jjgzy"></small></strong></p>

          1. <table id="jjgzy"></table>
            <object id="jjgzy"><nav id="jjgzy"></nav></object>