Update static/style 2.css
Browse files- static/style 2.css +19 -1
static/style 2.css
CHANGED
@@ -91,13 +91,14 @@ button:hover {
|
|
91 |
left: 0;
|
92 |
right: 0;
|
93 |
bottom: 0;
|
94 |
-
animation:
|
95 |
mix-blend-mode: overlay; /* Adjust blending mode as needed */
|
96 |
z-index: 1;
|
97 |
}
|
98 |
.background-container > *:not(.color-overlay) {
|
99 |
position: relative;
|
100 |
z-index: 2;
|
|
|
101 |
}
|
102 |
@keyframes colorChange {
|
103 |
0% { background-color: rgba(255, 0, 0, 0.6); } /* Red with transparency */
|
@@ -130,6 +131,23 @@ button:hover {
|
|
130 |
}
|
131 |
}
|
132 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
133 |
footer {
|
134 |
padding: 20px 0;
|
135 |
background-image: linear-gradient(45deg, #ff00ab, #002bff, #00ffd5, #48ff00, #fffb00, #ff7300, #ff0000);
|
|
|
91 |
left: 0;
|
92 |
right: 0;
|
93 |
bottom: 0;
|
94 |
+
animation: colorAndScaleChange 10s infinite;
|
95 |
mix-blend-mode: overlay; /* Adjust blending mode as needed */
|
96 |
z-index: 1;
|
97 |
}
|
98 |
.background-container > *:not(.color-overlay) {
|
99 |
position: relative;
|
100 |
z-index: 2;
|
101 |
+
overflow: hidden; /* To contain the scaling of the overlay */
|
102 |
}
|
103 |
@keyframes colorChange {
|
104 |
0% { background-color: rgba(255, 0, 0, 0.6); } /* Red with transparency */
|
|
|
131 |
}
|
132 |
}
|
133 |
|
134 |
+
@keyframes colorAndScaleChange {
|
135 |
+
0%, 100% {
|
136 |
+
background-color: rgba(255, 0, 0, 0.6);
|
137 |
+
transform: scale(1); /* Normal size */
|
138 |
+
}
|
139 |
+
33% {
|
140 |
+
background-color: rgba(0, 255, 0, 0.6);
|
141 |
+
transform: scale(1.05); /* Slightly larger */
|
142 |
+
}
|
143 |
+
66% {
|
144 |
+
background-color: rgba(0, 0, 255, 0.6);
|
145 |
+
transform: scale(1.1); /* Even larger */
|
146 |
+
}
|
147 |
+
}
|
148 |
+
|
149 |
+
|
150 |
+
|
151 |
footer {
|
152 |
padding: 20px 0;
|
153 |
background-image: linear-gradient(45deg, #ff00ab, #002bff, #00ffd5, #48ff00, #fffb00, #ff7300, #ff0000);
|