Comment implémenter un dégradé de texte en CSS3 ? Trois façons d'implémenter un dégradé de texte en CSS3 (code)-tutoriel CSS-php.cn

Comment implémenter un dégradé de texte en CSS3 ? Trois façons d'implémenter un dégradé de texte en CSS3 (code)

不言

Libérer： 2018-08-21 10:33:31

original

46555 Les gens l'ont consulté

Le contenu de cet article explique comment implémenter un dégradé de texte en CSS3 ? Les trois méthodes (codes) pour réaliser un dégradé de texte en CSS3 ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Pendant le processus de développement, les concepteurs d'interface utilisateur conçoivent souvent des dessins de conception avec du texte dégradé et les donnent à nous, programmeurs, et la plupart d'entre nous, programmeurs, soupirent en silence. Cependant, la naissance de CSS3 a résolu de nombreux problèmes. le processus de développement front-end, tel que l'animation, le masquage, etc.

1. Ce que nous voulons réaliser aujourd'hui, c'est utiliser du CSS pur pour implémenter le texte dégradé :

Comment implémenter un dégradé de texte en CSS3 ? Trois façons dimplémenter un dégradé de texte en CSS3 (code)

2. Style de base :

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

Copier après la connexion

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

Copier après la connexion

4. Deuxième méthode, utilisez 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)));
}

Copier après la connexion

.gradient-text-three{
    fill:url(#SVGID_1_);
    font-size:40px;
    font-weight:bolder;
}

Copier après la connexion

6. Tous les codes de cette DÉMO :

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

Copier après la connexion

Recommandations associées :

<!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>

Copier après la connexion

barre de progression css Dégradé du texte en fonction de la progression

Dégradé de couleur du texte implémenté par DIV+CSS+JS (réimprimé)_html/css_WEB-ITnose

Animation du dégradé de texte CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!