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
1155
ytr3d3
Abrir en el editor
Video
Publica tu código
0
Recomendado
25 November 2025
Surfista del metro
24 May 2025
Reinicio de Windows
28 June 2025
Navegación de la barra lateral HTML del panel de control de OMIC EST
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); }); });
