kouadioarmel055 द्वारा एक कोड

1229 kouadioarmel055

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

29 January 2025

एक कोड by sheeshokaokayokay

31 May 2025

अलेजांद्रोकुन्द्राह द्वारा लिखित एक कोड

26 December 2024

मैट्रिक्स एक होम पेज डायरेक्टरी है

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

अनुशंसित

एक कोड by sheeshokaokayokay

अलेजांद्रोकुन्द्राह द्वारा लिखित एक कोड

मैट्रिक्स एक होम पेज डायरेक्टरी है

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS