design: shape-8 삭제, 별 위치 우측 이동, King 반짝 텍스트 추가
This commit is contained in:
+41
-21
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ════════════════════════════════════════════════════
|
/* ════════════════════════════════════════════════════
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user