|
|
| 1번째 줄: |
1번째 줄: |
| <div style="position: relative; width: 90vw; height: 90vw; max-width: 800px; max-height: 800px; margin: 20px auto; background: radial-gradient(ellipse at center, #000814 0%, #001D3D 40%, #000814 100%); border-radius: 50%; box-shadow: inset 0 0 100px rgba(0, 119, 190, 0.3), inset 0 0 50px rgba(0, 180, 216, 0.2), 0 0 50px rgba(0, 119, 190, 0.5), 0 0 100px rgba(0, 180, 216, 0.3); border: 3px solid transparent; background-clip: padding-box;"> | | <div style="position: relative; width: 90vw; height: 90vw; max-width: 800px; max-height: 800px; margin: 20px auto; background: radial-gradient(circle at center, #000000 0%, #0a0a0a 50%, #000000 100%); border-radius: 50%; box-shadow: 0 0 50px #00ffff, 0 0 100px #0080ff, inset 0 0 50px rgba(0, 255, 255, 0.1); border: 2px solid #00ffff; position: relative; overflow: hidden;"> |
| <!-- 외곽 장식 테두리 --> | | <!-- 애니메이션 효과를 위한 회전 테두리 --> |
| <div style="position: absolute; width: 102%; height: 102%; border: 2px solid rgba(144, 224, 239, 0.3); border-radius: 50%; top: -1%; left: -1%; z-index: 0;"></div> | | <div style="position: absolute; width: 100%; height: 100%; border: 3px solid transparent; border-top-color: #00ffff; border-right-color: #0080ff; border-radius: 50%; animation: rotate 20s linear infinite;"></div> |
| <div style="position: absolute; width: 104%; height: 104%; border: 1px solid rgba(72, 202, 228, 0.2); border-radius: 50%; top: -2%; left: -2%; z-index: 0;"></div> | | <!-- 나머지 태양계 요소들은 동일 --> |
| <!-- 중심 항성 (태양 - 밝은 노란색 + 광채 효과) --> | | <!-- 중심 항성 (태양 - 밝은 노란색 + 광채 효과) --> |
| <div style="position: absolute; width: 4%; min-width: 20px; max-width: 40px; height: 4%; min-height: 20px; max-height: 40px; background: radial-gradient(circle, #FFEB3B 0%, #FFC107 70%, #FF9800 100%); box-shadow: 0 0 30px #FDB813, 0 0 60px #FFA000; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100;"></div> | | <div style="position: absolute; width: 4%; min-width: 20px; max-width: 40px; height: 4%; min-height: 20px; max-height: 40px; background: radial-gradient(circle, #FFEB3B 0%, #FFC107 70%, #FF9800 100%); box-shadow: 0 0 30px #FDB813, 0 0 60px #FFA000; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100;"></div> |
| <!-- 동심원들 (점선) --> | | <!-- 동심원들과 행성들 (위와 동일한 코드) --> |
| <div style="position: absolute; width: 12.5%; height: 12.5%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
| | <!-- ... 나머지 코드는 위와 동일 ... --> |
| <div style="position: absolute; width: 25%; height: 25%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
| |
| <div style="position: absolute; width: 37.5%; height: 37.5%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
| |
| <div style="position: absolute; width: 50%; height: 50%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
| |
| <div style="position: absolute; width: 62.5%; height: 62.5%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
| |
| <div style="position: absolute; width: 75%; height: 75%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
| |
| <div style="position: absolute; width: 87.5%; height: 87.5%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
| |
| <!-- 행성들 -->
| |
| <!-- 금성 (첫 번째 궤도 - 밝은 베이지) -->
| |
| <div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #FFE4B5; box-shadow: 0 0 5px #FFE4B5; border-radius: 50%; top: 50%; left: calc(50% + 6.25%); transform: translate(-50%, -50%); z-index: 50;">[[금성| ]]</div>
| |
| <!-- 지구 (두 번째 궤도 - 파란색 + 녹색 힌트) --> | |
| <div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: linear-gradient(135deg, #1E90FF 0%, #4169E1 50%, #228B22 100%); box-shadow: 0 0 5px #4169E1; border-radius: 50%; top: 50%; left: calc(50% + 12.5%); transform: translate(-50%, -50%); z-index: 50;">[[지구| ]]</div>
| |
| <!-- 화성 (세 번째 궤도 - 붉은색) -->
| |
| <div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #DC143C; box-shadow: 0 0 5px #DC143C; border-radius: 50%; top: 50%; left: calc(50% + 18.75%); transform: translate(-50%, -50%); z-index: 50;">[[화성| ]]</div>
| |
| <!-- 목성 (네 번째 궤도 - 줄무늬 효과) -->
| |
| <div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: linear-gradient(0deg, #CD853F 0%, #F0E68C 25%, #DEB887 50%, #F0E68C 75%, #CD853F 100%); box-shadow: 0 0 5px #DAA520; border-radius: 50%; top: 50%; left: calc(50% + 25%); transform: translate(-50%, -50%); z-index: 50;">[[목성| ]]</div>
| |
| <!-- 토성 (다섯 번째 궤도 - 연한 황금색) -->
| |
| <div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #FAEBD7; box-shadow: 0 0 5px #F0E68C; border-radius: 50%; top: 50%; left: calc(50% + 31.25%); transform: translate(-50%, -50%); z-index: 50;">[[토성| ]]</div>
| |
| <!-- 천왕성 (여섯 번째 궤도 - 밝은 청록색) -->
| |
| <div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #00CED1; box-shadow: 0 0 5px #00CED1; border-radius: 50%; top: 50%; left: calc(50% + 37.5%); transform: translate(-50%, -50%); z-index: 50;">[[천왕성| ]]</div>
| |
| <!-- 해왕성 (일곱 번째 궤도 - 진한 파란색) -->
| |
| <div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #4682B4; box-shadow: 0 0 5px #4682B4; border-radius: 50%; top: 50%; left: calc(50% + 43.75%); transform: translate(-50%, -50%); z-index: 50;">[[해왕성| ]]</div>
| |
| </div> | | </div> |