La animación de degradado se puede agregar al fondo de sus sitios web mediante el uso de una regla simple de HTML y CSS @keyframes que genera la animación deseada.
Código HTML: En el siguiente ejemplo, se implementa la estructura básica de la página HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Gradient Background Animation</title> </head> <body> <section> <div> <h2>GeeksforGeeks</h2> <p>Gradient background Animation</p> </div> </section> </body> </html>
Código CSS: en la siguiente sección, el diseño del fondo se implementa utilizando la regla CSS @keyframes simple que proporciona la función de animación. Proporcionar diferentes colores de degradado se realiza mediante la función linear-gradient() .
<style>
body {
margin: 0;
padding: 0;
animation: effect 3s linear infinite;
}
section {
width: 100%;
height: 100vh;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3em;
}
h2 {
text-align: center;
}
@keyframes effect {
0% {
background: linear-gradient(#008000, #00FF00);
}
50% {
background: linear-gradient(#220080, #0084ff);
}
100% {
background: linear-gradient(#e78f3c, #ff4800);
}
}
</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>Gradient Background Animation</title>
</head>
<style>
body {
margin: 0;
padding: 0;
animation: effect 3s linear infinite;
}
section {
width: 100%;
height: 100vh;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3em;
}
h2 {
text-align: center;
}
@keyframes effect {
0% {
background: linear-gradient(#008000, #00FF00);
}
50% {
background: linear-gradient(#220080, #0084ff);
}
100% {
background: linear-gradient(#e78f3c, #ff4800);
}
}
</style>
<body>
<section>
<div>
<h2>GeeksforGeeks</h2>
<p>Gradient background Animation</p>
</div>
</section>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA