design: 브랜드 패널 도형 강화 — 세모·별 추가, 두께·밝기 증가, 모션 가속
This commit is contained in:
+98
-55
@@ -595,94 +595,137 @@ a { color: inherit; text-decoration: none; }
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.shape { position: absolute; }
|
||||
|
||||
/* 큰 원 테두리 — 우측 상단 */
|
||||
/* 1. 큰 원 테두리 — 우측 상단 */
|
||||
.shape-1 {
|
||||
width: 380px;
|
||||
height: 380px;
|
||||
border: 1.5px solid rgba(30, 86, 160, .25);
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
border: 4px solid rgba(99, 179, 237, .45);
|
||||
border-radius: 50%;
|
||||
top: -100px;
|
||||
right: -80px;
|
||||
animation: shapeFloat1 28s ease-in-out infinite;
|
||||
top: -90px;
|
||||
right: -70px;
|
||||
animation: shapeFloat1 16s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 중간 다이아몬드 — 좌측 하단 */
|
||||
/* 2. 다이아몬드 (채움) — 좌측 하단 */
|
||||
.shape-2 {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background: rgba(30, 86, 160, .1);
|
||||
border-radius: 24px;
|
||||
bottom: 100px;
|
||||
left: -50px;
|
||||
animation: shapeFloat2 22s ease-in-out infinite;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background: rgba(99, 179, 237, .2);
|
||||
border: 3px solid rgba(99, 179, 237, .5);
|
||||
border-radius: 20px;
|
||||
bottom: 90px;
|
||||
left: -45px;
|
||||
animation: shapeFloat2 13s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 작은 원 — 중앙 우측 */
|
||||
/* 3. 중간 원 — 중앙 우측 */
|
||||
.shape-3 {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border: 1.5px solid rgba(255, 255, 255, .12);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 3px solid rgba(255, 255, 255, .3);
|
||||
border-radius: 50%;
|
||||
top: 42%;
|
||||
right: 14%;
|
||||
animation: shapeFloat3 19s ease-in-out infinite;
|
||||
top: 40%;
|
||||
right: 12%;
|
||||
animation: shapeFloat3 11s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 큰 둥근 사각형 테두리 — 하단 중앙 */
|
||||
/* 4. 둥근 사각형 테두리 — 하단 */
|
||||
.shape-4 {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border: 1px solid rgba(30, 86, 160, .2);
|
||||
border-radius: 40px;
|
||||
bottom: -70px;
|
||||
right: 18%;
|
||||
animation: shapeFloat4 25s ease-in-out infinite;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 3px solid rgba(99, 179, 237, .35);
|
||||
border-radius: 36px;
|
||||
bottom: -60px;
|
||||
right: 16%;
|
||||
animation: shapeFloat4 15s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 아주 작은 원 — 상단 좌측 */
|
||||
/* 5. 작은 원 채움 — 상단 좌측 */
|
||||
.shape-5 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(30, 86, 160, .18);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: rgba(147, 197, 253, .35);
|
||||
border: 2px solid rgba(147, 197, 253, .6);
|
||||
border-radius: 50%;
|
||||
top: 22%;
|
||||
left: 18%;
|
||||
animation: shapeFloat5 16s ease-in-out infinite;
|
||||
top: 20%;
|
||||
left: 16%;
|
||||
animation: shapeFloat5 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 6. 세모 — 우측 중하단 */
|
||||
.shape-6 {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: rgba(99, 179, 237, .22);
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
bottom: 28%;
|
||||
right: 6%;
|
||||
animation: shapeFloat6 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 7. 별 — 좌측 중앙 */
|
||||
.shape-7 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(253, 224, 71, .3);
|
||||
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%;
|
||||
left: 10%;
|
||||
animation: shapeFloat7 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 8. 큰 세모 테두리 — 상단 중앙 (outline 효과) */
|
||||
.shape-8 {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: transparent;
|
||||
border-left: 4px solid rgba(99, 179, 237, .3);
|
||||
border-bottom: 4px solid rgba(99, 179, 237, .3);
|
||||
top: 8%;
|
||||
left: 38%;
|
||||
animation: shapeFloat8 14s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shapeFloat1 {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
25% { transform: translate(-18px, 28px); }
|
||||
50% { transform: translate(12px, 18px); }
|
||||
75% { transform: translate(-8px, -14px); }
|
||||
25% { transform: translate(-22px, 32px); }
|
||||
50% { transform: translate(16px, 22px); }
|
||||
75% { transform: translate(-10px, -18px); }
|
||||
}
|
||||
|
||||
@keyframes shapeFloat2 {
|
||||
0%, 100% { transform: rotate(45deg) translate(0, 0); }
|
||||
33% { transform: rotate(62deg) translate(18px, -22px); }
|
||||
66% { transform: rotate(32deg) translate(-14px, 18px); }
|
||||
33% { transform: rotate(68deg) translate(22px, -26px); }
|
||||
66% { transform: rotate(28deg) translate(-18px, 22px); }
|
||||
}
|
||||
|
||||
@keyframes shapeFloat3 {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
50% { transform: translate(22px, -28px); }
|
||||
50% { transform: translate(28px, -34px); }
|
||||
}
|
||||
|
||||
@keyframes shapeFloat4 {
|
||||
0%, 100% { transform: rotate(12deg) translate(0, 0); }
|
||||
40% { transform: rotate(22deg) translate(-18px, -12px); }
|
||||
80% { transform: rotate(4deg) translate(14px, 8px); }
|
||||
40% { transform: rotate(24deg) translate(-22px, -14px); }
|
||||
80% { transform: rotate(2deg) translate(18px, 10px); }
|
||||
}
|
||||
|
||||
@keyframes shapeFloat5 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(14px, -18px) scale(1.15); }
|
||||
66% { transform: translate(-10px, 12px) scale(0.9); }
|
||||
33% { transform: translate(16px, -20px) scale(1.2); }
|
||||
66% { transform: translate(-12px, 14px) scale(0.85); }
|
||||
}
|
||||
@keyframes shapeFloat6 {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
33% { transform: translate(-18px, -22px) rotate(20deg); }
|
||||
66% { transform: translate(14px, 10px) rotate(-15deg); }
|
||||
}
|
||||
@keyframes shapeFloat7 {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
||||
33% { transform: translate(20px, -16px) rotate(36deg) scale(1.15); }
|
||||
66% { transform: translate(-14px, 18px) rotate(-18deg) scale(0.9); }
|
||||
}
|
||||
@keyframes shapeFloat8 {
|
||||
0%, 100% { transform: rotate(0deg) translate(0, 0); }
|
||||
50% { transform: rotate(30deg) translate(18px, 22px); }
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════════
|
||||
|
||||
Reference in New Issue
Block a user