UI: King 텍스트 움직임 범위 확장, 별 도형 제거, 도형 밝기 조정

- kingFloat 애니메이션 translate 범위를 ±16px → ±70px 로 확장
- login.html / denied.html 에서 shape-7(별) div 제거
- shape-1~6 도형 밝기 은은하게 감소 (이전 수준으로 복구)
- .shape-king text-transform: none → "King" 으로 표시

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-22 02:04:54 +09:00
parent 672a99ef80
commit c4ae1ab3e6
3 changed files with 14 additions and 26 deletions
+14 -24
View File
@@ -601,19 +601,19 @@ a { color: inherit; text-decoration: none; }
.shape-1 { .shape-1 {
width: 360px; width: 360px;
height: 360px; height: 360px;
border: 4px solid rgba(99, 179, 237, .45); border: 3px solid rgba(30, 86, 160, .28);
border-radius: 50%; border-radius: 50%;
top: -90px; top: -90px;
right: -70px; right: -70px;
animation: shapeFloat1 16s ease-in-out infinite; animation: shapeFloat1 16s ease-in-out infinite;
} }
/* 2. 다이아몬드 (채움) — 좌측 하단 */ /* 2. 다이아몬드 — 좌측 하단 */
.shape-2 { .shape-2 {
width: 130px; width: 130px;
height: 130px; height: 130px;
background: rgba(99, 179, 237, .2); background: rgba(30, 86, 160, .12);
border: 3px solid rgba(99, 179, 237, .5); border: 3px solid rgba(30, 86, 160, .3);
border-radius: 20px; border-radius: 20px;
bottom: 90px; bottom: 90px;
left: -45px; left: -45px;
@@ -624,7 +624,7 @@ a { color: inherit; text-decoration: none; }
.shape-3 { .shape-3 {
width: 80px; width: 80px;
height: 80px; height: 80px;
border: 3px solid rgba(255, 255, 255, .3); border: 3px solid rgba(255, 255, 255, .14);
border-radius: 50%; border-radius: 50%;
top: 40%; top: 40%;
right: 12%; right: 12%;
@@ -635,7 +635,7 @@ a { color: inherit; text-decoration: none; }
.shape-4 { .shape-4 {
width: 200px; width: 200px;
height: 200px; height: 200px;
border: 3px solid rgba(99, 179, 237, .35); border: 3px solid rgba(30, 86, 160, .22);
border-radius: 36px; border-radius: 36px;
bottom: -60px; bottom: -60px;
right: 16%; right: 16%;
@@ -646,8 +646,8 @@ a { color: inherit; text-decoration: none; }
.shape-5 { .shape-5 {
width: 44px; width: 44px;
height: 44px; height: 44px;
background: rgba(147, 197, 253, .35); background: rgba(30, 86, 160, .2);
border: 2px solid rgba(147, 197, 253, .6); border: 2px solid rgba(30, 86, 160, .35);
border-radius: 50%; border-radius: 50%;
top: 20%; top: 20%;
left: 16%; left: 16%;
@@ -658,31 +658,20 @@ a { color: inherit; text-decoration: none; }
.shape-6 { .shape-6 {
width: 90px; width: 90px;
height: 90px; height: 90px;
background: rgba(99, 179, 237, .22); background: rgba(30, 86, 160, .14);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
bottom: 28%; bottom: 28%;
right: 6%; right: 6%;
animation: shapeFloat6 12s ease-in-out infinite; animation: shapeFloat6 12s ease-in-out infinite;
} }
/* 7. 별 — 우측 중앙 (녹색 화살표 위치) */
.shape-7 {
width: 64px;
height: 64px;
background: rgba(253, 224, 71, .38);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
top: 50%;
right: 9%;
animation: shapeFloat7 10s ease-in-out infinite;
}
/* King 텍스트 — 반짝이며 유동 */ /* King 텍스트 — 반짝이며 유동 */
.shape-king { .shape-king {
font-size: 30px; font-size: 30px;
font-weight: 700; font-weight: 700;
color: rgba(255, 255, 255, .9); color: rgba(255, 255, 255, .9);
letter-spacing: 4px; letter-spacing: 4px;
text-transform: uppercase; text-transform: none;
top: 28%; top: 28%;
right: 7%; right: 7%;
animation: kingFloat 13s ease-in-out infinite, kingSparkle 2.4s ease-in-out infinite; animation: kingFloat 13s ease-in-out infinite, kingSparkle 2.4s ease-in-out infinite;
@@ -727,9 +716,10 @@ a { color: inherit; text-decoration: none; }
} }
@keyframes kingFloat { @keyframes kingFloat {
0%, 100% { transform: translate(0, 0); } 0%, 100% { transform: translate(0, 0); }
25% { transform: translate(-12px, 16px); } 20% { transform: translate(-65px, 50px); }
50% { transform: translate(8px, 10px); } 40% { transform: translate(55px, -40px); }
75% { transform: translate(-6px, -12px); } 60% { transform: translate(-45px, -60px); }
80% { transform: translate(70px, 30px); }
} }
@keyframes kingSparkle { @keyframes kingSparkle {
0%, 100% { 0%, 100% {
-1
View File
@@ -19,7 +19,6 @@
<div class="shape shape-4"></div> <div class="shape shape-4"></div>
<div class="shape shape-5"></div> <div class="shape shape-5"></div>
<div class="shape shape-6"></div> <div class="shape shape-6"></div>
<div class="shape shape-7"></div>
<div class="shape shape-king">King</div> <div class="shape shape-king">King</div>
</div> </div>
-1
View File
@@ -19,7 +19,6 @@
<div class="shape shape-4"></div> <div class="shape shape-4"></div>
<div class="shape shape-5"></div> <div class="shape shape-5"></div>
<div class="shape shape-6"></div> <div class="shape shape-6"></div>
<div class="shape shape-7"></div>
<div class="shape shape-king">King</div> <div class="shape shape-king">King</div>
</div> </div>