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 kouadioarmel055
717
kouadioarmel055
Abrir en el editor
Publica tu código
Recomendado
12 June 2025
Un código de Mete
22 April 2025
Un código de andres.stahr
14 March 2025
Formulario de registro/inicio de sesión
HTML
Copy
Andev Web
Home
About
Work
Blog
Contact
CSS
Copy
* { padding: 0; margin: 0; box-sizing: border-box; font-family: din-condensed, sans-serif; } body { background: #000; } a { color: black; text-decoration: none; } a:active, a:hover, a:link, a:visited { color: black; text-decoration: none; } .menu-overlay { width: 100%; height: 100%; padding: 2rem; top: 50%; left: 0; transform: translateY(-50%); position: fixed; z-index: 1; display: flex; justify-content: center; align-items: center; text-align: center; height: 100vh; } .menu-overlay nav ul { list-style: none; font-size: 6.5rem; text-transform: uppercase; font-weight: 500; } .menu-overlay nav ul li a { color: #101010; } .menu-overlay nav ul li { position: relative; cursor: pointer; transition: 0.2s all cubic-bezier(0,1.95,.21,.77); z-index: 1; width: 100%; height: 100%; transform: scale(1); } .menu-overlay nav ul li:after, .menu-overlay nav ul li:before { position: absolute; -webkit-text-fill-color: white; width: 100%; height: 100%; opacity: 1; z-index: 2; } .menu-overlay nav ul li a { display: flex; justify-content: center; align-items: center; } .menu-overlay nav ul li:hover { transform: scale(1.4); } .menu-overlay nav ul li:hover:before { top: 0; left: 0; content: attr(data-text); animation: glitch-top 0.25s ease; clip: rect(0, 450px, 65px, 0); } .menu-overlay nav ul li:hover:after { animation: glitch-bottom 0.125s ease-in-out; bottom: 0; right: 0; content: attr(data-text); clip: rect(64px, 450px, 100px, 0); } @keyframes text-blur { 0% { filter: blur(0px); } 50% { filter: blur(3px); } 100% { filter: blur(0px); } } @keyframes glitch-bottom { 0% { bottom: 0; right: -1px; font-family: din-condensed, sans-serif; } 25% { bottom: 0; right: 0; font-family: "IBM Plex Mono", monospace; } 50% { bottom: 0; background-color: white; clip: rect(35px, 250px, 30px, 0); right: 5px; font-family: din-condensed, sans-serif; } 75% { bottom: 0; right: 0; font-family: "IBM Plex Mono", monospace; } 100% { bottom: 0; right: -1px; font-family: din-condensed, sans-serif; clip: rect(35px, 250px, 30px, 0); } } @keyframes glitch-top { 0% { top: 0; left: -1px; font-family: din-condensed, sans-serif; } 25% { top: 0; left: 0; font-family: "IBM Plex Mono", monospace; } 50% { top: 0; left: 5px; font-family: din-condensed, sans-serif; } 75% { top: 0; left: 0; font-family: "IBM Plex Mono", monospace; } 100% { top: 0; left: -1px; font-family: din-condensed, sans-serif; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */