Hola, buen dia, como se pudiera agregar un titulo que cambie de colores, como si fuera un letrero neon?
Solucionado
Hola, buen dia, como se pudiera agregar un titulo que cambie de colores, como si fuera un letrero neon?
Hola José, espero que estés bien.
Para agregar un título que cambie de colores como un letrero neon, puedes utilizar CSS y JavaScript. Con CSS, puedes darle estilos al título, como un color y una sombra para simular el efecto de luz. Luego, con JavaScript, puedes crear una función que cambie el color del fondo del título en un intervalo de tiempo específico, como cada segundo o cada medio segundo. Puedes utilizar la función setInterval() de JavaScript para ejecutar la función de cambio de color en un intervalo de tiempo determinado.
Vea un ejemplo de como lo puedes hacer:
Puedes separar el código Javascript en un archivo .js asi como el CSS en .css, si ya lo aprendiste hacer.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neon</title>
</head>
<style>
body {
background: gray;
text-align: center;
font-size: 75px;
}
h1 {
color: red;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px red,
0 0 30px red, 0 0 40px red, 0 0 55px red, 0 0 75px red;
transition: color 0.5s ease-in-out;
transition: text-shadow 0.5s ease-in-out;
}
</style>
<body>
<h1>Testing</h1>
</body>
<script>
const h1 = document.querySelector("h1");
const colors = [
"red",
"blue",
"green",
"yellow",
"orange",
"purple",
"pink",
"cyan",
"magenta",
"lime",
"violet",
"gold",
];
setInterval(() => {
const colorIndex = parseInt(Math.random() * colors.length);
const shadow = `0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px ${colors[colorIndex]}, 0 0 30px ${colors[colorIndex]},
0 0 40px ${colors[colorIndex]}, 0 0 55px ${colors[colorIndex]}, 0 0 75px ${colors[colorIndex]}`;
h1.style.color = colors[colorIndex];
h1.style.textShadow = shadow;
}, 1000);
</script>
</html>
Puedes mejorar este código dividiendo en funciones, que puede permitir una mayor personalización.
Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.
¡Saludos!