WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by kouadioarmel055
1031
kouadioarmel055
Open In Editor
Publish Your Code
Recommended
14 June 2024
Animated card of social media
28 August 2024
Parallax Depth Cards
19 November 2025
CSS Animated Loading Screen with Dots
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) */