پیش‌نمایش زنده
کد HTML
<div class="sazzad-card">
  <div class="sazzad-bg"></div>
  <div class="sazzad-aurora"></div>
</div>
کد CSS
.sazzad-card {
  position: relative;
  width: 230px;
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.4);

  box-shadow:
    25px 25px 60px rgba(0, 0, 0, 0.12),
    -20px -20px 50px rgba(255, 255, 255, 0.55);

  transition: 0.4s ease;
}

.sazzad-card:hover {
  transform: translateY(-6px);
  box-shadow:
    25px 35px 65px rgba(0, 0, 0, 0.22),
    -20px -20px 50px rgba(255, 255, 255, 0.65);
}

/* Inner Glow Panel */
.sazzad-bg {
  position: absolute;
  inset: 6px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.85),
    rgba(245, 245, 245, 0.6)
  );
  border-radius: 16px;
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  z-index: 2;
}

/* Animated Aurora Blob */
.sazzad-aurora {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(28px);
  z-index: 1;

  background: radial-gradient(
    circle,
    rgba(255, 0, 72, 0.85),
    rgba(255, 0, 0, 0.4),
    transparent
  );

  animation: sazzad-aurora-move 6.5s infinite ease-in-out;
  opacity: 0.9;
}

/* Aurora Animation */
@keyframes sazzad-aurora-move {
  0% {
    transform: translate(-60%, -60%) scale(1);
  }
  30% {
    transform: translate(10%, -40%) scale(1.15);
  }
  60% {
    transform: translate(20%, 20%) scale(1.05);
  }
  80% {
    transform: translate(-40%, 10%) scale(1.2);
  }
  100% {
    transform: translate(-60%, -60%) scale(1);
  }
}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06