Un codice di kouadioarmel055

1226 kouadioarmel055

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

4 June 2025

Un codice di bachir123

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 codice di kouadioarmel055

Consigliato

Un codice di lanayayassine8

Un codice di Metehan

Un codice di bachir123

HTML

CSS

JS

Consigliato

Un codice di lanayayassine8

Un codice di Metehan

Un codice di bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS