پیشنمایش زنده
کد 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);
}
}