연습장:삼쩌모/1 문서 원본 보기

{{삼쩌모 연습장}}{{목차}}
== 구종차트 ==
{{#css:
/* 공통 컨테이너 설정 */
.pitch-container {
position: relative;
height: 180px; /* 정보가 펼쳐질 공간 확보 */
margin-top: 3px;
margin-bottom: 1rem;
}

/* 각 구종(Circle) 기본 스타일 */
.pitch-node {
position: absolute;
left: 50%;
z-index: 40;
width: 3.2rem;
border-radius: 50%;
text-align: center;
line-height: 1.1;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
transform: translateX(-50%);
cursor: pointer;
transition: all 0.3s ease-in-out;
overflow: hidden;
}

/* 호버 시 펼쳐지는 상세 정보 스타일 */
.details {
max-height: 0;
opacity: 0;
font-size: 0.75rem;
margin-top: 4px;
transition: all 0.3s ease-in-out;
border-top: 1px solid rgba(0,0,0,0.1);
padding-top: 4px;
}

/* 호버 액션: 원이 커지며 정보 출력 */
.pitch-node:hover {
border-radius: 12px;
height: auto;
z-index: 100;
}

.pitch-node:hover .details {
max-height: 50px;
opacity: 1;
}

/* 선(Tail) 스타일 유지 */
.pitch-line {
position: absolute;
left: 50%;
width: 2rem;
transform: translateX(-50%);
z-index: 30;
}
}}
<div class="pitch-container">
<div class="pitch-node" style="top: 0; border: 0.3rem double #cccccc; color: #b31b1b; background: white;">
<strong>4FB</strong><br>44%
<div class="details">148.5km<br>회전 2300</div>
</div>

<div class="pitch-node" style="top: 56px; left: calc(50% - 40px); border: 0.1rem solid #3e75b0; background: #5287bf; color: white;">
<strong>SLD</strong><br>31%
<div class="details">132.1km<br>수평 15cm</div>
</div>

<div class="pitch-node" style="top: 80px; border: 0.1rem solid #e3a000; background: #ffc000; color: black;">
<strong>CRV</strong><br>17%
<div class="details">121.4km<br>낙차 40cm</div>
</div>

<div class="pitch-line" style="top: 1.6rem; height: 60px; background: linear-gradient(to bottom, transparent, #ffc000aa);"></div>
</div>