card information

Open In Editor Publish Your Code

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

card information

Recommended

CSS Card Layout with Gradient Background

Download App HTML Card

3D card

HTML

CSS

JS

Recommended

CSS Card Layout with Gradient Background

Download App HTML Card

3D card

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS