El color del texto se puede cambiar de acuerdo con la elección del programador utilizando la regla CSS @keyframes .
Código HTML: el siguiente fragmento de código crea un elemento div HTML que contiene el texto para modificar.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Text Color Animation</title> </head> <body> <div> <h2>GeeksforGeeks</h2> </div> </body> </html>
Código CSS: los siguientes fragmentos de código demuestran el diseño del texto utilizando algunas propiedades básicas de CSS junto con la regla CSS @keyframes para cambiar el color del texto y producir el efecto de animación.
<style>
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2 {
font-size: 5em;
font-family: serif;
color: transparent;
text-align: center;
animation: effect 2s linear infinite;
}
@keyframes effect {
0% {
background: linear-gradient(
#008000, #00FF00);
-webkit-background-clip: text;
}
100% {
background: linear-gradient(
#3CE7D7, #000FFF);
-webkit-background-clip: text;
}
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Text Color Animation</title>
<style>
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2 {
font-size: 5em;
font-family: serif;
color: transparent;
text-align: center;
animation: effect 2s linear infinite;
\
}
@keyframes effect {
0% {
background: linear-gradient(
#008000, #00FF00);
-webkit-background-clip: text;
}
100% {
background: linear-gradient(
#3CE7D7, #000FFF);
-webkit-background-clip: text;
}
}
</style>
</head>
<body>
<div>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA