En este artículo, aprenderá a crear una pantalla de texto de neón usando HTML y CSS.
La pantalla de texto de neón es el más simple pero uno de los efectos más llamativos que se utiliza para dar un diseño genial a los textos de sus páginas web. En la pantalla de neón, el color del texto brilla continuamente y puedes controlarlo mediante el tiempo de animación. El texto obtiene un efecto brillante usando la propiedad text-shadow con algunas combinaciones de colores.
Acercarse:En primer lugar, agregaremos el texto que queremos mostrar en estilo neón en una clase de intervalo. Luego, en esta clase, establecemos el color de la fuente de acuerdo con nuestro deseo. Luego tenemos que usar la propiedad animation y darle un nombre. En la animación, configuramos el tiempo de animación para que sea más lento para un comienzo lento y un final lento de la animación, la iteración de la animación es infinita para una visualización continua y, finalmente, la dirección de la animación se alterna para que la animación avance primero. , luego hacia atrás.
Luego usamos @keyframes para especificar el código de animación. En @keyframes usamos la propiedad text-shadow y aplicamos varias combinaciones de colores para crear el efecto de luz de neón.
Ejemplo 1:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neon text Display Using HTML and CSS</title>
<style>
body {
margin: 10px;
font-family: sans-sarif;
height: 100%;
}
/* values of properties of animation assigned */
.neon-header {
text-align: center;
line-height: 2;
color: green;
animation: neon 1s ease-in-out infinite alternate;
margin-left: 200px;
}
/* various colour combinations used to create
neon effect */
@keyframes neon {
from {
text-shadow: 0 0 35px #85FF64,
0 0 40px #2BBF03,
0 0 55px #141ae2;
}
</style>
</head>
<body>
<center>
<!-- text we want to display -->
<span class="neon-header">
<h1>GeeksforGeeks</h1>
</span>
<p1>A Computer Science Portal for Geeks</p1>
</center>
</body>
</html>
Producción:
Nota: Puede eliminar el texto que se muestra en cualquier etiqueta que no sea necesaria para contener el texto en la etiqueta <span>.
Ejemplo: 2 : en este ejemplo, verá que el texto brilla de sombra a otras sombras, esta es más atractiva a la vista.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Neon text Display Using HTML and CSS</title>
<style>
body {
background-color: black;
}
.glow {
font-size: 60px;
color: green;
text-align: center;
animation: glow 2s ease-in-out infinite alternate;
}
/* Text glowing from onw shade to other shade */
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px rgb(43, 255, 0),
0 0 20px rgb(43, 255, 0),
0 0 30px #26e600,
0 0 40px #26e600,
0 0 50px #26e600,
0 0 60px #26e600,
0 0 70px #26e600;
}
to {
text-shadow: 0 0 20px #4dff7a;
0 0 30px #4dff7a,
0 0 40px #4dff7a,
0 0 50px #4dff7a,
0 0 60px #4dff7a,
0 0 70px #4dff7a,
0 0 80px #4dff7a;
}
}
</style>
</head>
<body>
<!-- Content will Glow -->
<h1 class="glow">GeeksforGeeks</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA