WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Menú del sitio
2283
Andev.web
Abrir en el editor
Video
Publica tu código
2
Recomendado
28 November 2024
Menú animado
17 December 2023
Rotación del Logotipo de Chrome
30 November 2024
Sitio web de viajes con radio de borde invertido
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) */