Spaces:
Running
Running
Update styles.css
Browse files- styles.css +14 -9
styles.css
CHANGED
@@ -92,26 +92,31 @@ header {
|
|
92 |
}
|
93 |
|
94 |
.main-cream {
|
95 |
-
width:
|
96 |
-
max-width:
|
97 |
height: auto;
|
98 |
background: url('cream.png') no-repeat center/contain; /* Замените на реальное изображение */
|
99 |
position: relative;
|
100 |
-
margin:
|
101 |
-
filter: drop-shadow(0 0
|
102 |
transform-style: preserve-3d;
|
103 |
-
transition: transform 0.
|
104 |
-
animation: creamFloat
|
105 |
}
|
106 |
|
107 |
.main-cream:hover, .main-cream.active {
|
108 |
-
transform: translateY(-
|
109 |
-
filter: drop-shadow(0 0
|
110 |
}
|
111 |
|
112 |
@keyframes creamFloat {
|
113 |
0%, 100% { transform: translateY(0) rotateZ(0deg) translateZ(0); }
|
114 |
-
50% { transform: translateY(-
|
|
|
|
|
|
|
|
|
|
|
115 |
}
|
116 |
|
117 |
.hero {
|
|
|
92 |
}
|
93 |
|
94 |
.main-cream {
|
95 |
+
width: 35%;
|
96 |
+
max-width: 450px;
|
97 |
height: auto;
|
98 |
background: url('cream.png') no-repeat center/contain; /* Замените на реальное изображение */
|
99 |
position: relative;
|
100 |
+
margin: 5rem auto 0;
|
101 |
+
filter: drop-shadow(0 0 50px rgba(0, 255, 204, 0.9)) brightness(1.3);
|
102 |
transform-style: preserve-3d;
|
103 |
+
transition: transform 0.8s ease, filter 0.8s ease;
|
104 |
+
animation: creamFloat 12s infinite ease-in-out, creamGlow 6s infinite ease-in-out;
|
105 |
}
|
106 |
|
107 |
.main-cream:hover, .main-cream.active {
|
108 |
+
transform: translateY(-40px) rotateZ(10deg) translateZ(70px);
|
109 |
+
filter: drop-shadow(0 0 80px rgba(0, 255, 204, 1)) brightness(1.6);
|
110 |
}
|
111 |
|
112 |
@keyframes creamFloat {
|
113 |
0%, 100% { transform: translateY(0) rotateZ(0deg) translateZ(0); }
|
114 |
+
50% { transform: translateY(-30px) rotateZ(5deg) translateZ(50px); }
|
115 |
+
}
|
116 |
+
|
117 |
+
@keyframes creamGlow {
|
118 |
+
0%, 100% { filter: drop-shadow(0 0 50px rgba(0, 255, 204, 0.9)) brightness(1.3); }
|
119 |
+
50% { filter: drop-shadow(0 0 70px rgba(255, 0, 122, 0.9)) brightness(1.5); }
|
120 |
}
|
121 |
|
122 |
.hero {
|