WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
ytr3d3 द्वारा एक कोड
955
ytr3d3
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
16 June 2025
मेटे का एक कोड
5 December 2024
JEBJEB द्वारा एक कोड
1 June 2025
कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी
HTML
Copy
CodePen - Staggered Blink Text Menu
Home
Archives
Tags
Categories
About
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); }); });