Información de la tarjeta

Abrir en el editor Publica tu código

Recomendado

12 January 2025

.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

Un código de Mikeykun

Un código de Metr

Página 404 con paralaje

HTML

CSS

JS

Recomendado

Un código de Mikeykun

Un código de Metr

Página 404 con paralaje

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS