Wie implementiert man einen Textverlauf in CSS3? Drei Möglichkeiten zum Implementieren eines Textverlaufs in CSS3 (Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierung eines Textverlaufs in CSS3. Die drei Methoden (Codes) zum Realisieren von Textverläufen in CSS3 haben einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich sind.

Während des Entwicklungsprozesses entwerfen UI-Designer häufig einige Designzeichnungen mit Verlaufstext und geben sie an uns Programmierer weiter. Die meisten von uns Programmierern seufzen jedoch im Stillen. Die Geburt von CSS3 hat jedoch viele Probleme gelöst der Front-End-Entwicklungsprozess, wie Animation, Maskierung usw.

1 Was wir heute erreichen wollen, ist die Verwendung von reinem CSS, um Verlaufstext zu implementieren:

2. Grundstil:

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

3 , text-fill-color:

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

Die zweite Methode, verwenden Sie 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)));
}

5. Die dritte Methode, verwenden Sie linearGradient, fill:

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

rrree

6. Alle Codes dieser DEMO:

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

Verwandte Empfehlungen:

CSS-Fortschrittsbalken-Textverlauf je nach Fortschritt

Textfarbverlauf implementiert durch DIV+CSS+JS (nachgedruckt)_html/css_WEB-ITnose

CSS3-Textverlaufsanimation

Das obige ist der detaillierte Inhalt vonWie implementiert man einen Textverlauf in CSS3? Drei Möglichkeiten zum Implementieren eines Textverlaufs in CSS3 (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!