پیشنمایش زنده
کد HTML
<div class="mechanical-timer-module">
<div class="time-group">
<div class="digit-casing" id="m1" style="--val: 0;">
<div class="digit-track">
<span>1</span>
</div>
</div>
<div class="digit-casing" id="m2" style="--val: 0;">
<div class="digit-track">
<span>1</span>
</div>
</div>
</div>
<div class="time-separator">:</div>
<div class="time-group">
<div class="digit-casing" id="s1" style="--val: 0;">
<div class="digit-track">
<span>1</span>
</div>
</div>
<div class="digit-casing" id="s2" style="--val: 0;">
<div class="digit-track">
<span>8</span>
</div>
</div>
</div>
</div>
کد CSS
.mechanical-timer-module {
display: flex;
align-items: center;
gap: 0px;
background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
padding: 24px 32px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow:
0 32px 64px -16px rgba(0, 0, 0, 0.9),
inset 0 1px 1px rgba(255, 255, 255, 0.1),
inset 0 -4px 8px rgba(0, 0, 0, 0.6);
}
.time-group {
display: flex;
gap: 6px;
}
.time-separator {
font-family: "Space Mono", monospace;
font-size: 3.5rem;
font-weight: 700;
color: #8c8c8d;
animation: blink 1s step-end infinite;
margin: 0 4px;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
}
.digit-casing {
position: relative;
width: 64px;
height: 84px;
background: #212121;
border-radius: 8px;
overflow: hidden;
box-shadow:
inset 0 12px 24px rgba(0, 0, 0, 1),
inset 0 -2px 4px rgba(255, 255, 255, 0.05),
0 1px 0 rgba(255, 255, 255, 0.1);
}
.digit-casing::after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: rgba(0, 0, 0, 0.9);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
transform: translateY(-50%);
z-index: 10;
pointer-events: none;
}
.digit-track {
display: flex;
flex-direction: column;
transform: translateY(calc(var(--val) * -84px));
transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}
.digit-track span {
display: flex;
justify-content: center;
align-items: center;
height: 84px;
font-family: "Space Mono", monospace;
font-size: 4rem;
font-weight: 700;
color: #ccff00;
text-shadow: 0 0 16px rgba(204, 255, 0, 0.3);
line-height: 1;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}