Um Código por kouadioarmel055

543 kouadioarmel055

Abrir no Editor Publique Seu Código

Recomendado

28 November 2024

código de dança

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

Um Código por kouadioarmel055

Recomendado

Um código por robustbug269

Um código por Landingpage1

código de dança

HTML

CSS

JS

Recomendado

Um código por robustbug269

Um código por Landingpage1

código de dança

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS