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
1384
kouadioarmel055
Abrir en el editor
Video
Publica tu código
1
Recomendado
5 September 2024
Generador de contraseñas
15 May 2025
Un código de facontheo1
12 December 2025
Estructura HTML del juego Tres en raya
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) */