flpolprojects commited on
Commit
0a40430
·
verified ·
1 Parent(s): a1433f0

Update styles.css

Browse files
Files changed (1) hide show
  1. styles.css +14 -9
styles.css CHANGED
@@ -92,26 +92,31 @@ header {
92
  }
93
 
94
  .main-cream {
95
- width: 30%;
96
- max-width: 400px;
97
  height: auto;
98
  background: url('cream.png') no-repeat center/contain; /* Замените на реальное изображение */
99
  position: relative;
100
- margin: 4rem auto 0;
101
- filter: drop-shadow(0 0 40px rgba(0, 255, 204, 0.9)) brightness(1.3);
102
  transform-style: preserve-3d;
103
- transition: transform 0.6s ease, filter 0.6s ease;
104
- animation: creamFloat 10s infinite ease-in-out;
105
  }
106
 
107
  .main-cream:hover, .main-cream.active {
108
- transform: translateY(-30px) rotateZ(5deg) translateZ(50px);
109
- filter: drop-shadow(0 0 60px rgba(0, 255, 204, 1)) brightness(1.5);
110
  }
111
 
112
  @keyframes creamFloat {
113
  0%, 100% { transform: translateY(0) rotateZ(0deg) translateZ(0); }
114
- 50% { transform: translateY(-20px) rotateZ(5deg) translateZ(30px); }
 
 
 
 
 
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 {