Dodałem do Hero Animowanego robota
This commit is contained in:
Paweł Domański
+72
-40
@@ -1000,8 +1000,8 @@ h1, h2, h3, h4, h5, h6 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* kontener — TYLKO float */
|
||||
.hero__robot-container {
|
||||
/* warstwa 2: float — wszystko lata razem */
|
||||
.hero__robot-float {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -1009,32 +1009,60 @@ h1, h2, h3, h4, h5, h6 {
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
/* blask korpusu — cyjanowy, osobny element, przesunięty o -1.4s w fazie */
|
||||
/* warstwa 3: blask korpusu — cyan, przesunięty o -1.6s względem żarówki */
|
||||
.hero__robot-body-glow {
|
||||
position: absolute;
|
||||
inset: 15% 15% 5%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle,
|
||||
rgba(34, 211, 238, 0.35) 0%,
|
||||
rgba(6, 182, 212, 0.15) 45%,
|
||||
transparent 70%
|
||||
);
|
||||
mix-blend-mode: screen;
|
||||
pointer-events: none;
|
||||
animation: body-glow-pulse 3.5s ease-in-out infinite;
|
||||
animation-delay: -1.4s; /* inne przesunięcie fazowe niż żarówka */
|
||||
display: none; /* Removed as it creates an unnatural circle */
|
||||
}
|
||||
|
||||
/* obrazek — TYLKO blask żarówki (żółty kierunkowy) */
|
||||
.hero__robot-img {
|
||||
width: 90%;
|
||||
max-width: 546px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
mix-blend-mode: screen;
|
||||
animation: bulb-flicker 2.2s ease-in-out infinite;
|
||||
/* warstwa 4: obraz z blaskiem żarówki (żółty drop-shadow kierunkowy) */
|
||||
.hero__robot-layers {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
aspect-ratio: 1 / 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
overflow: visible; /* changed from hidden to let glow expand if needed */
|
||||
}
|
||||
|
||||
.hero__robot-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
mix-blend-mode: normal; /* changed from screen for better body appearance */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero__robot-layer--body {
|
||||
z-index: 1;
|
||||
filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.3));
|
||||
animation: robot-body-glow 3.2s ease-in-out infinite;
|
||||
animation-delay: -1.6s;
|
||||
}
|
||||
|
||||
.hero__robot-bulb-container {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
animation: bulb-float 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero__robot-layer--bulb {
|
||||
z-index: 2;
|
||||
mix-blend-mode: screen; /* bulb and glow should be screen */
|
||||
animation: bulb-flicker 2.4s ease-in-out infinite;
|
||||
transform: scale(0.35) translate(95%, -135%);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hero__robot-shadow {
|
||||
@@ -1051,29 +1079,28 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
/* ── Keyframes ── */
|
||||
@keyframes bulb-flicker {
|
||||
0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 10px rgba(254, 244, 187, 0.4)); }
|
||||
33% { opacity: 1; filter: drop-shadow(0 0 25px rgba(254, 244, 187, 0.9)); }
|
||||
66% { opacity: 0.9; filter: drop-shadow(0 0 15px rgba(254, 244, 187, 0.6)); }
|
||||
}
|
||||
|
||||
@keyframes body-glow-pulse {
|
||||
0%, 100% { opacity: 0.4; transform: scale(1); }
|
||||
50% { opacity: 0.7; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes robot-body-glow {
|
||||
0%, 100% { filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.2)); }
|
||||
50% { filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.5)); }
|
||||
}
|
||||
|
||||
@keyframes robot-float {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
30% { transform: translateY(-18px) rotate(-1.5deg); }
|
||||
70% { transform: translateY(-10px) rotate(1deg); }
|
||||
}
|
||||
|
||||
/* blask korpusu — cyjanowy, na osobnym divie */
|
||||
@keyframes body-glow-pulse {
|
||||
0%, 100% { opacity: 0.15; transform: scale(0.88); }
|
||||
50% { opacity: 1; transform: scale(1.08); }
|
||||
}
|
||||
|
||||
/* żarówka — kierunkowy żółty drop-shadow na obrazku
|
||||
offset (22px, -22px) kieruje blask w górę-prawo gdzie jest żarówka */
|
||||
@keyframes bulb-flicker {
|
||||
0% { filter: drop-shadow(22px -22px 8px rgba(255, 210, 0, 0.15)); }
|
||||
20% { filter: drop-shadow(22px -22px 28px rgba(255, 230, 0, 0.75)); }
|
||||
35% { filter: drop-shadow(22px -22px 14px rgba(255, 200, 0, 0.35)); }
|
||||
55% { filter: drop-shadow(22px -22px 32px rgba(255, 220, 0, 0.85)); }
|
||||
70% { filter: drop-shadow(22px -22px 18px rgba(255, 210, 0, 0.45)); }
|
||||
85% { filter: drop-shadow(22px -22px 26px rgba(255, 230, 0, 0.65)); }
|
||||
100% { filter: drop-shadow(22px -22px 8px rgba(255, 210, 0, 0.15)); }
|
||||
}
|
||||
|
||||
@keyframes robot-shadow {
|
||||
0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.6; }
|
||||
@@ -1081,6 +1108,11 @@ h1, h2, h3, h4, h5, h6 {
|
||||
70% { transform: translateX(-50%) scaleX(0.85); opacity: 0.4; }
|
||||
}
|
||||
|
||||
@keyframes bulb-float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-15px) rotate(2deg); }
|
||||
}
|
||||
|
||||
|
||||
/* ── Responsywność ── */
|
||||
@media (max-width: 900px) {
|
||||
|
||||
Reference in New Issue
Block a user