Un código de kouadioarmel055

1384 kouadioarmel055

Abrir en el editor Video Publica tu código

Recomendado

5 September 2024

Estructura HTML del juego Tres en raya

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 código de kouadioarmel055

Recomendado

Generador de contraseñas

Un código de facontheo1

Estructura HTML del juego Tres en raya

HTML

CSS

JS

Recomendado

Generador de contraseñas

Un código de facontheo1

Estructura HTML del juego Tres en raya

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS