WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de ytr3d3
1159
ytr3d3
Abrir en el editor
Video
Publica tu código
0
Recomendado
28 November 2024
Fondo animado de Matrix
20 June 2025
Formulario de registro de inicio de sesión HTML con efecto de tarjeta 3D
10 July 2025
Plantilla de formulario de inicio de sesión HTML CSS
HTML
Copy
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Staggered Blink Text Menu</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <ul class="blink-text-menu"> <li><a href="#">Home</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Tags</a></li> <li><a href="#">Categories</a></li> <li><a href="#">About</a></li> </ul> <!-- partial --> <script src="./script.js"></script> </body> </html>
CSS
Copy
@import url(https://fonts.googleapis.com/css?family=Lato); body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #1A1E23; } .blink-text-menu { display: flex; flex-direction: column; list-style-type: none; } .blink-text-menu li a { position: relative; display: flex; padding: 6px; color: white; font-family: Lato, sans-serif; text-decoration: none; } .blink-text-menu li a span { position: relative; overflow: hidden; transition: 0.6s; } .blink-text-menu li a span .out { display: inline-flex; } .blink-text-menu li a span .in { position: absolute; left: 0; opacity: 0; transform: translateX(100%); } .blink-text-menu li a:hover span .out { opacity: 0; transform: translateX(-100%); } .blink-text-menu li a:hover span .in { opacity: 1; transform: translateX(0); }
JS
Copy
"use strict"; let blinkTextMenuLinks = document.querySelectorAll(".blink-text-menu li a"); blinkTextMenuLinks.forEach(link => { let letters = link.textContent.split(""); link.textContent = ""; letters.forEach((letter, i) => { i += 1; let span = document.createElement("span"); let delay = i / 20; if (i % 2 === 0) { delay -= 0.1; } else { delay += 0.05; } let letterOut = document.createElement("span"); letterOut.textContent = letter; letterOut.style.transitionDelay = `${delay}s`; letterOut.classList.add("out"); span.append(letterOut); let letterIn = document.createElement("span"); letterIn.textContent = letter; letterIn.style.transitionDelay = `${delay}s`; letterIn.classList.add("in"); span.append(letterIn); link.append(span); }); });
