Información de la tarjeta

Abrir en el editor Publica tu código

Recomendado

3 March 2025

Fondo de cuadrícula de cilindros 3D

18 May 2024

.content h2 {
  font-size: 19px;
  margin: 25px 0;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: #111845a6;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 20px 50px rgb(23, 32, 90);
  border: 2px solid #2a3cad;
  color: white;
  padding: 20px;
}
.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: 0.5s;
  pointer-events: none;
}
.box:hover:before {
  left: -50%;
  transform: skewX(-5deg);
}
.box .content {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 1px solid #f0a591;
  padding: 20px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(9, 0, 0, 0.5);
}
.box span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box span:nth-child(1) {
  transform: rotate(0deg);
}
.box span:nth-child(2) {
  transform: rotate(90deg);
}
.box span:nth-child(3) {
  transform: rotate(180deg);
}
.box span:nth-child(4) {
  transform: rotate(270deg);
}
.box span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: #50dfdb;
  animation: animate 4s linear infinite;
}
@keyframes animate {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50.1% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

Información de la tarjeta

Recomendado

Fondo de cuadrícula de cilindros 3D

Página de espera.

Un código de Metehan

HTML

CSS

JS

Recomendado

Fondo de cuadrícula de cilindros 3D

Página de espera.

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS