Dégradé sur texte
<div class="ex-masque">
Dégradé sur texte
</div>
.ex-masque{
font-size:calc(100vw /16);
background: linear-gradient(to left,#ffc712 30%, #ff4911 65%, #c42482 100%) text /*raccourci background-clip:text*/;
color: transparent
}
Même principe que l'exemple avec le dégradé.
Image sur texte
<div class="ex-masque">
Image sur texte
</div>
.ex-masque{
font-size: calc(100vw /16);
background: url(votre-image.jpg) no-repeat center center text /*raccourci background-clip:text*/;
color: transparent;
}
Nous utilisons une image comme sur l'exemple précédent, à laquelle nous ajoutons une animation CSS qui va déplacer l'image avec la propriété background-position :
Image animée sur texte
<div class="ex-masque">
Image animée sur texte
</div>
.ex-masque{
font-size: calc(100vw /16);
background: url(votre-image.jpg) top center text;
color: transparent;
animation: votre-animation 10s infinite alternate
}
@keyframes votre-animation {
to{
background-position: bottom center
}
}
Exemple avec animation CSS dégradé sur texte :
Animation dégradé sur texte
<div class="ex-masque">
Animation dégradé sur texte
</div>
.ex-masque{
font-size: calc(100vw /16);
background: linear-gradient(to left,#ffc712 0%, #ff4911 65%, #c42482 100%) no-repeat 0 0 /100% 100% text,black 0 0 / 0 0 text;
color: transparent;
animation: anim-back 5s infinite linear alternate
}
@keyframes anim-back{
to {
background-size: 0% 100%
}
}
Dans cet exemple,nous utilisons un dégradé sur texte pour obtenir deux couleurs différentes et nous appliquons ensuite avec transition CSS avec la propriété background-size.
Passez votre souris sur le texte ci-dessous :
Transition dégradé sur texte
<div class="ex-masque">
Transition dégradé sur texte
</div>
.ex-masque {
font-size: calc(100vw /16);
background: linear-gradient(to right, #6753ea 50%, #444 50%) 100% 0 / 200% 100% text;
color: transparent;
transition: background-position .4s cubic-bezier(0,0,.5,1)
}
.ex-masque5:hover{
background-position: 0 0
}