연습장:삼쩌모/1: 두 판 사이의 차이
태그: 되돌려진 기여 |
태그: 되돌려진 기여 |
||
| 3번째 줄: | 3번째 줄: | ||
{{#css: | {{#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-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> | </div> | ||