logo

Background animé sur texte

HTML

<center><h1 class="rainbow-text">Emandarine</h1></center>

 

CSS

.rainbow-text {
font-family: "Work Sans", sans-serif;
font-weight: 800;
font-size: 6em;
width: 7em;

}

.rainbow-text {
background: #CA4246;
background-color: #CA4246;
background: conic-gradient(
#CA4246 16.666%, 
#476098 16.666%, 
#476098 33.333%, 
#F18F43 33.333%, 
#F18F43 50%, 
#8B9862 50%, 
#8B9862 66.666%, 
#E16541 66.666%, 
#E16541 83.333%, 
#A7489B 83.333%);


background-size: 57%;
background-repeat: repeat;


-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

animation: rainbow-text-animation-rev 0.5s ease forwards;

cursor: pointer;
}
.rainbow-text:hover {
animation: rainbow-text-animation 0.5s ease forwards;
}


@keyframes rainbow-text-animation {
0% {
background-size: 57%;
background-position: 0 0;
}
20% {
background-size: 57%;
background-position: 0 1em;
}
100% {
background-size: 300%;
background-position: -9em 1em;
}
}

@keyframes rainbow-text-animation-rev {
0% {
background-size: 200%;
background-position: -9em 1em;
}
20% {
background-size: 57%;
background-position: 0 1em;
}
100% {
background-size: 57%;
background-position: 0 0;
}
}