پیشنمایش زنده
کد HTML
<div class="west-background">
<div class="west-container">
<div class="west-title">Bounty Board</div>
<label class="west-label">
<input type="checkbox" class="west-input" />
<div class="saloon-doors-checkbox">
<div class="door left"></div>
<div class="door right"></div>
<svg class="sheriff-star-svg" viewBox="0 0 24 24">
<path
d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
></path>
</svg>
</div>
<span class="west-text">Wrangle Cattle</span>
</label>
<label class="west-label">
<input type="checkbox" class="west-input" checked="" />
<div class="saloon-doors-checkbox">
<div class="door left"></div>
<div class="door right"></div>
<svg class="sheriff-star-svg" viewBox="0 0 24 24">
<path
d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
></path>
</svg>
</div>
<span class="west-text">Mend the Fence</span>
</label>
<label class="west-label">
<input type="checkbox" class="west-input" />
<div class="saloon-doors-checkbox">
<div class="door left"></div>
<div class="door right"></div>
<svg class="sheriff-star-svg" viewBox="0 0 24 24">
<path
d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
></path>
</svg>
</div>
<span class="west-text">Stop a Train</span>
</label>
</div>
</div>
کد CSS
.west-background {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.west-container {
width: 260px;
height: 280px;
background-color: #6b4f3a;
border: 5px solid #4a382a;
border-radius: 5px;
box-shadow:
0 0 0 5px #d4ac6e,
0 8px 20px rgba(0, 0, 0, 0.6);
padding: 20px;
display: flex;
flex-direction: column;
gap: 30px;
font-family: "Rye", "Georgia", serif;
}
.west-title {
font-size: 26px;
color: #f1e4d3;
text-align: center;
text-shadow: 2px 2px #4a382a;
}
.west-label {
display: flex;
align-items: center;
cursor: pointer;
}
.west-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.saloon-doors-checkbox {
width: 30px;
height: 30px;
margin-right: 15px;
flex-shrink: 0;
position: relative;
perspective: 100px;
}
.door {
position: absolute;
width: 50%;
height: 100%;
top: 0;
background-color: #8c6e54;
border: 2px solid #4a382a;
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.door.left {
left: 0;
transform-origin: left;
}
.door.right {
right: 0;
transform-origin: right;
}
.sheriff-star-svg {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
fill: #f1e4d3;
filter: drop-shadow(0 0 2px #d4ac6e);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.west-text {
color: #f1e4d3;
font-size: 18px;
transition: color 0.4s ease;
}
.west-input:checked + .saloon-doors-checkbox .door.left {
transform: rotateY(-110deg);
}
.west-input:checked + .saloon-doors-checkbox .door.right {
transform: rotateY(110deg);
}
.west-input:checked + .saloon-doors-checkbox .sheriff-star-svg {
transform: translate(-50%, -50%) scale(1);
}
.west-input:checked ~ .west-text {
color: #a18060;
}