palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix : utm 드론 아이콘 수정

remotes/origin/main
이시연 1 month ago
parent
01e4b3e447
commit
3b8076d82a
1 changed files with 47 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      src/css/main.css

84
src/css/main.css
Unescape View File

@ -142,23 +142,52 @@ body{overflow-x:hidden;}
.main-utm-route--a{width:62%;left:18%;top:42%;transform:rotate(-18deg);}
.main-utm-route--b{width:48%;right:12%;top:62%;transform:rotate(22deg);}
.utm-floating-air{position:absolute;top:120px;right:2%;width:42vw;height:210px;pointer-events:none;z-index:1;overflow:visible;animation:utmAirFlow 18s linear infinite;}
.utm-floating-drone{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.42);backdrop-filter:blur(12px);box-shadow:0 0 0 8px rgba(58,64,129,.04),0 10px 24px rgba(58,64,129,.1);}
.utm-floating-drone svg{position:absolute;inset:9px;width:34px;height:34px;overflow:visible;}
.utm-floating-drone svg circle{fill:none;stroke:#3a4081;stroke-width:2.4;}
.utm-floating-drone svg circle:first-child{filter:drop-shadow(0 0 10px rgba(58,64,129,.34));}
.utm-floating-drone svg path{fill:none;stroke:#3a4081;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.utm-floating-drone span{position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(58,64,129,.2);animation:utmDronePulse 2.8s ease-out infinite;}
.utm-floating-drone--a{left:10%;top:122px;animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;}
.utm-floating-air{position:absolute;top:120px;right:2%;width:42vw;height:210px;pointer-events:none;z-index:1;overflow:visible;opacity:.78;}
.utm-floating-drone{position:absolute;width:46px;height:46px;border-radius:18px;background:rgba(255,255,255,.52);border:1px solid rgba(58,64,129,.1);backdrop-filter:blur(12px);box-shadow:0 14px 30px rgba(31,41,55,.08);}
.utm-floating-drone::before{content:"";position:absolute;inset:-10px;border-radius:24px;border:1px solid rgba(91,108,255,.08);opacity:.6;animation:utmPulse 4s ease-out infinite;}
.utm-floating-drone svg{position:absolute;inset:10px;width:26px;height:26px;overflow:visible;}
.utm-floating-drone svg circle{fill:none;stroke:#3a4081;stroke-width:1.7;opacity:.72;}
.utm-floating-drone svg path{fill:none;stroke:#3a4081;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.72;}
.utm-floating-drone span{display:none;}
.utm-floating-drone--a{left:10%;top:122px;animation:utmDroneMoveA 9s ease-in-out infinite;}
.utm-floating-drone--b{left:44%;top:72px;animation:utmDroneMoveB 11s ease-in-out infinite;animation-delay:-2s;}
.utm-floating-drone--c{right:4%;top:138px;animation:utmDroneMoveC 10s ease-in-out infinite;animation-delay:-4s;}
.utm-floating-drone--a svg circle,.utm-floating-drone--a svg path{stroke:#5B6CFF;}
.utm-floating-drone--a svg circle:first-child{filter:drop-shadow(0 0 10px rgba(91,108,255,.34));}
.utm-floating-drone--b{left:44%;top:72px;box-shadow:0 0 0 8px rgba(243,199,104,.08),0 10px 24px rgba(243,199,104,.14);animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;}
.utm-floating-drone--b svg{animation:utmDroneColorShift 6s ease-in-out infinite;}
.utm-floating-drone--b svg circle,.utm-floating-drone--b svg path{stroke:#F3C768;}
.utm-floating-drone--b svg circle:first-child{filter:drop-shadow(0 0 10px rgba(243,199,104,.34));}
.utm-floating-drone--c{right:4%;top:138px;animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;animation-delay:-2.4s;box-shadow:0 0 0 8px rgba(255,123,123,.06),0 10px 24px rgba(255,123,123,.12);}
.utm-floating-drone--c svg circle,.utm-floating-drone--c svg path{stroke:#FF7B7B;}
.utm-floating-drone--c svg circle:first-child{filter:drop-shadow(0 0 10px rgba(255,123,123,.32));}
.utm-floating-drone--b svg circle,.utm-floating-drone--b svg path{stroke:#8F1700;}
.utm-floating-drone--c svg circle,.utm-floating-drone--c svg path{stroke:#4F7DF3;}
.utm-floating-drone--a svg circle,.utm-floating-drone--a svg path{stroke:#5B6CFF;}
.utm-floating-drone--b svg circle,.utm-floating-drone--b svg path{stroke:#8F1700;}
.utm-floating-drone--c svg circle,.utm-floating-drone--c svg path{stroke:#4F7DF3;}
@keyframes utmDroneMoveA{
0%{transform:translate3d(0,0,0) rotate(-6deg);}
25%{transform:translate3d(12px,-10px,0) rotate(-2deg);}
50%{transform:translate3d(-6px,-18px,0) rotate(2deg);}
75%{transform:translate3d(-14px,-6px,0) rotate(-4deg);}
100%{transform:translate3d(0,0,0) rotate(-6deg);}
}
@keyframes utmDroneMoveB{
0%{transform:translate3d(0,0,0) rotate(5deg);}
25%{transform:translate3d(-10px,8px,0) rotate(1deg);}
50%{transform:translate3d(14px,-12px,0) rotate(-3deg);}
75%{transform:translate3d(6px,10px,0) rotate(3deg);}
100%{transform:translate3d(0,0,0) rotate(5deg);}
}
@keyframes utmDroneMoveC{
0%{transform:translate3d(0,0,0) rotate(-4deg);}
25%{transform:translate3d(8px,-14px,0) rotate(0deg);}
50%{transform:translate3d(-12px,-4px,0) rotate(4deg);}
75%{transform:translate3d(10px,12px,0) rotate(-2deg);}
100%{transform:translate3d(0,0,0) rotate(-4deg);}
}
@keyframes utmPulse{
0%{transform:scale(.9);opacity:.4;}
70%{opacity:0;}
100%{transform:scale(1.35);opacity:0;}
}
/* ─── Responsive ─── */
@media(max-width:1024px){.main-utm-section{padding-top:76px;}
@ -180,27 +209,8 @@ body{overflow-x:hidden;}
}
/* ─── Keyframes ─── */
@keyframes utmAirFlow{0%,100%{transform:translateX(0);}
50%{transform:translateX(-18px);}
}
@keyframes utmDroneMoveA{0%,100%{transform:translate3d(0,0,0) scale(1);}
50%{transform:translate3d(26px,-12px,0) scale(1.04);}
}
@keyframes utmDroneMoveB{0%,100%{transform:translate3d(0,0,0) scale(.82);}
50%{transform:translate3d(-20px,10px,0) scale(.88);}
}
@keyframes utmDronePulse{0%{transform:scale(.7);opacity:.62;}
100%{transform:scale(1.9);opacity:0;}
}
@keyframes utmDronePulseFloat{0%,100%{filter:drop-shadow(0 0 0 rgba(58,64,129,0));}
50%{filter:drop-shadow(0 0 18px rgba(58,64,129,.18));}
}
@keyframes utmDroneColorShift{0%{filter:none;}
45%{filter:none;}
50%{filter:drop-shadow(0 0 10px rgba(243,199,104,.42));}
55%{filter:drop-shadow(0 0 10px rgba(243,199,104,.42));}
100%{filter:none;}
}
@keyframes utmWaveMove{0%{transform:translateX(-120%);}100%{transform:translateX(120%);}}
/* ─── uam ─── */
.airspace-transition-section{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(58,64,129,.04),transparent 30%),radial-gradient(circle at 88% 10%,rgba(58,64,129,.035),transparent 32%),linear-gradient(180deg,#ffffff 0%,#f7f9ff 48%,#ffffff 100%);}

Write Preview
Loading…
Cancel
Save