design: shape-8 삭제, 별 위치 우측 이동, King 반짝 텍스트 추가

This commit is contained in:
2026-05-22 01:19:19 +09:00
parent d2b145576b
commit 672a99ef80
3 changed files with 43 additions and 23 deletions
+41 -21
View File
@@ -665,27 +665,29 @@ a { color: inherit; text-decoration: none; }
animation: shapeFloat6 12s ease-in-out infinite; animation: shapeFloat6 12s ease-in-out infinite;
} }
/* 7. 별 — 측 중앙 */ /* 7. 별 — 측 중앙 (녹색 화살표 위치) */
.shape-7 { .shape-7 {
width: 60px; width: 64px;
height: 60px; height: 64px;
background: rgba(253, 224, 71, .3); 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%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
top: 52%; top: 50%;
left: 10%; right: 9%;
animation: shapeFloat7 10s ease-in-out infinite; animation: shapeFloat7 10s ease-in-out infinite;
} }
/* 8. 큰 세모 테두리 — 상단 중앙 (outline 효과) */ /* King 텍스트 — 반짝이며 유동 */
.shape-8 { .shape-king {
width: 110px; font-size: 30px;
height: 110px; font-weight: 700;
background: transparent; color: rgba(255, 255, 255, .9);
border-left: 4px solid rgba(99, 179, 237, .3); letter-spacing: 4px;
border-bottom: 4px solid rgba(99, 179, 237, .3); text-transform: uppercase;
top: 8%; top: 28%;
left: 38%; right: 7%;
animation: shapeFloat8 14s ease-in-out infinite; animation: kingFloat 13s ease-in-out infinite, kingSparkle 2.4s ease-in-out infinite;
white-space: nowrap;
user-select: none;
} }
@keyframes shapeFloat1 { @keyframes shapeFloat1 {
@@ -720,12 +722,30 @@ a { color: inherit; text-decoration: none; }
} }
@keyframes shapeFloat7 { @keyframes shapeFloat7 {
0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
33% { transform: translate(20px, -16px) rotate(36deg) scale(1.15); } 33% { transform: translate(-20px, -18px) rotate(36deg) scale(1.15); }
66% { transform: translate(-14px, 18px) rotate(-18deg) scale(0.9); } 66% { transform: translate(14px, 16px) rotate(-18deg) scale(0.9); }
} }
@keyframes shapeFloat8 { @keyframes kingFloat {
0%, 100% { transform: rotate(0deg) translate(0, 0); } 0%, 100% { transform: translate(0, 0); }
50% { transform: rotate(30deg) translate(18px, 22px); } 25% { transform: translate(-12px, 16px); }
50% { transform: translate(8px, 10px); }
75% { transform: translate(-6px, -12px); }
}
@keyframes kingSparkle {
0%, 100% {
text-shadow:
0 0 8px rgba(255, 255, 255, .6),
0 0 18px rgba(99, 179, 237, .5);
opacity: .75;
}
50% {
text-shadow:
0 0 16px rgba(255, 255, 255, 1),
0 0 36px rgba(99, 179, 237, 1),
0 0 56px rgba(147, 197, 253, .9),
0 0 80px rgba(59, 130, 246, .6);
opacity: 1;
}
} }
/* ════════════════════════════════════════════════════ /* ════════════════════════════════════════════════════
+1 -1
View File
@@ -20,7 +20,7 @@
<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-7"></div>
<div class="shape shape-8"></div> <div class="shape shape-king">King</div>
</div> </div>
<div class="brand-logo"> <div class="brand-logo">
+1 -1
View File
@@ -20,7 +20,7 @@
<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-7"></div>
<div class="shape shape-8"></div> <div class="shape shape-king">King</div>
</div> </div>
<div class="brand-logo"> <div class="brand-logo">