Un code par kouadioarmel055

539 kouadioarmel055

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 January 2025

Un code par lebronpaulsuarezz

HTML

CSS

* {
  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;
  }
}

Un code par kouadioarmel055

Recommandé

Un code par creativearray554

Nexus de données Cyberpunk

Un code par lebronpaulsuarezz

HTML

CSS

JS

Recommandé

Un code par creativearray554

Nexus de données Cyberpunk

Un code par lebronpaulsuarezz

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS