El efecto de texto parpadeante también se conoce como el efecto de texto parpadeante que se puede crear fácilmente usando la regla @keyframes de HTML y CSS y la propiedad de opacidad .
Código HTML: en esta sección, crearemos un elemento div básico que tendrá algo de texto dentro.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Blinking Text</title> </head> <body> <div> <h2>Blink</h2> </div> </body> </html>
Código CSS: En esta sección se implementa el diseño del texto con el efecto deseado mediante el uso de la regla CSS @keyframes . La propiedad de opacidad se establece como se muestra a continuació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:#008000;
text-align: center;
animation: animate 1.5s linear infinite;
}
@keyframes animate{
0%{
opacity: 0;
}
50%{
opacity: 0.7;
}
100%{
opacity: 0;
}
}
</style>
Código final: 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>Blinking Text</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: #008000;
text-align: center;
animation: animate
1.5s linear infinite;
}
@keyframes animate {
0% {
opacity: 0;
}
50% {
opacity: 0.7;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div>
<h2>Blink</h2>
</div>
</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