پیشنمایش زنده
کد HTML
<div class="card-6" aria-hidden="true">
<div class="card-6__holo">
<div class="card-6__layer card-6__layer--back">6</div>
<div class="card-6__layer card-6__layer--mid">6</div>
<div class="card-6__layer card-6__layer--front">6</div>
</div>
</div>
کد CSS
.card-6 {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
perspective: 900px;
margin: 34px 0;
}
.card-6__holo {
position: relative;
width: 140px;
height: 140px;
border-radius: 26px;
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
animation: card6-wobble 6.2s ease-in-out infinite;
}
@keyframes card6-wobble {
0% {
transform: rotateX(16deg) rotateY(-18deg);
}
50% {
transform: rotateX(18deg) rotateY(18deg);
}
100% {
transform: rotateX(16deg) rotateY(-18deg);
}
}
.card-6__layer {
position: absolute;
font-weight: 900;
font-size: 108px;
letter-spacing: -6px;
line-height: 1;
-webkit-text-stroke: 1px rgba(0, 123, 255, 0.7);
background: linear-gradient(
90deg,
rgba(0, 123, 255, 0.18) 0%,
rgba(0, 123, 255, 0.92) 35%,
rgba(0, 180, 255, 0.7) 60%,
rgba(0, 123, 255, 0.22) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
opacity: 0.95;
transform-style: preserve-3d;
}
.card-6__layer--back {
opacity: 0.18;
filter: blur(1px);
transform: translateZ(-70px);
-webkit-text-stroke: 1px rgba(0, 123, 255, 0.45);
}
.card-6__layer--mid {
opacity: 0.42;
filter: blur(0.4px);
transform: translateZ(-34px);
-webkit-text-stroke: 1px rgba(0, 123, 255, 0.55);
}
.card-6__layer--front {
opacity: 0.98;
transform: translateZ(0px);
-webkit-text-stroke: 1px rgba(0, 123, 255, 0.78);
}
.card-6__holo::before {
content: "";
position: absolute;
inset: 0;
border-radius: 26px;
background: radial-gradient(
circle at 40% 35%,
rgba(0, 123, 255, 0.14),
rgba(0, 0, 0, 0) 62%
);
filter: blur(8px);
opacity: 0.9;
transform: translateZ(-80px);
}
.card-6__holo::after {
content: "";
position: absolute;
inset: 0;
border-radius: 26px;
border: 1px solid rgba(0, 123, 255, 0.16);
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.01) 45%,
rgba(0, 0, 0, 0)
);
opacity: 0.55;
transform: translateZ(-45px);
}
@media (max-width: 600px) {
.card-6__holo {
width: 128px;
height: 128px;
border-radius: 24px;
}
.card-6__layer {
font-size: 96px;
letter-spacing: -5px;
}
}
@media (prefers-reduced-motion: reduce) {
.card-6__holo {
animation: none !important;
}
}