Skip to content

Commit 33c573e

Browse files
ChaniSurkisChaniSurkis
authored
Add 'Cosmic Lava Lamp' CSS animation contribution (#3336)
1 parent b5fcaf4 commit 33c573e

File tree

3 files changed

+218
-0
lines changed

3 files changed

+218
-0
lines changed

‎Art/ChaniSurkis-cosmic-lava-lamp/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Cosmic Lava Lamp</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="blob blob-1"></div>
12+
<div class="blob blob-2"></div>
13+
<div class="blob blob-3"></div>
14+
<div class="blob blob-4"></div>
15+
<div class="blob blob-5"></div>
16+
</div>
17+
</body>
18+
</html>

‎Art/ChaniSurkis-cosmic-lava-lamp/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Cosmic Lava Lamp",
3+
"githubHandle": "ChaniSurkis"
4+
}

‎Art/ChaniSurkis-cosmic-lava-lamp/styles.css‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
overflow: hidden;
9+
background: linear-gradient(45deg, #0a0e27, #1a0933, #0d1b2a);
10+
background-size: 400% 400%;
11+
animation: gradientShift 20s ease infinite;
12+
font-family: Arial, sans-serif;
13+
}
14+
15+
.container {
16+
position: relative;
17+
width: 100vw;
18+
height: 100vh;
19+
filter: blur(40px) contrast(20);
20+
}
21+
22+
.blob {
23+
position: absolute;
24+
border-radius: 50%;
25+
filter: blur(20px);
26+
mix-blend-mode: screen;
27+
animation-timing-function: ease-in-out;
28+
animation-iteration-count: infinite;
29+
}
30+
31+
.blob-1 {
32+
width: 300px;
33+
height: 300px;
34+
background: radial-gradient(circle, #ff006e, #8338ec);
35+
top: 20%;
36+
left: 10%;
37+
animation: float1 15s infinite, pulse1 8s infinite;
38+
}
39+
40+
.blob-2 {
41+
width: 250px;
42+
height: 250px;
43+
background: radial-gradient(circle, #3a86ff, #06ffa5);
44+
top: 60%;
45+
left: 70%;
46+
animation: float2 18s infinite, pulse2 6s infinite;
47+
}
48+
49+
.blob-3 {
50+
width: 350px;
51+
height: 350px;
52+
background: radial-gradient(circle, #fb5607, #ffbe0b);
53+
top: 40%;
54+
left: 50%;
55+
animation: float3 20s infinite, pulse3 10s infinite;
56+
}
57+
58+
.blob-4 {
59+
width: 200px;
60+
height: 200px;
61+
background: radial-gradient(circle, #ff006e, #3a86ff);
62+
top: 70%;
63+
left: 20%;
64+
animation: float4 12s infinite, pulse4 7s infinite;
65+
}
66+
67+
.blob-5 {
68+
width: 280px;
69+
height: 280px;
70+
background: radial-gradient(circle, #8338ec, #06ffa5);
71+
top: 10%;
72+
left: 60%;
73+
animation: float5 16s infinite, pulse5 9s infinite;
74+
}
75+
76+
@keyframes gradientShift {
77+
0%, 100% {
78+
background-position: 0% 50%;
79+
}
80+
50% {
81+
background-position: 100% 50%;
82+
}
83+
}
84+
85+
@keyframes float1 {
86+
0%, 100% {
87+
transform: translate(0, 0) rotate(0deg);
88+
}
89+
33% {
90+
transform: translate(100px, -80px) rotate(120deg);
91+
}
92+
66% {
93+
transform: translate(-50px, 100px) rotate(240deg);
94+
}
95+
}
96+
97+
@keyframes float2 {
98+
0%, 100% {
99+
transform: translate(0, 0) rotate(0deg);
100+
}
101+
33% {
102+
transform: translate(-120px, 70px) rotate(-120deg);
103+
}
104+
66% {
105+
transform: translate(80px, -90px) rotate(-240deg);
106+
}
107+
}
108+
109+
@keyframes float3 {
110+
0%, 100% {
111+
transform: translate(0, 0) rotate(0deg) scale(1);
112+
}
113+
33% {
114+
transform: translate(-90px, -100px) rotate(150deg) scale(1.1);
115+
}
116+
66% {
117+
transform: translate(110px, 80px) rotate(300deg) scale(0.9);
118+
}
119+
}
120+
121+
@keyframes float4 {
122+
0%, 100% {
123+
transform: translate(0, 0) rotate(0deg);
124+
}
125+
33% {
126+
transform: translate(150px, 60px) rotate(-90deg);
127+
}
128+
66% {
129+
transform: translate(-70px, -110px) rotate(-180deg);
130+
}
131+
}
132+
133+
@keyframes float5 {
134+
0%, 100% {
135+
transform: translate(0, 0) rotate(0deg);
136+
}
137+
33% {
138+
transform: translate(-100px, 90px) rotate(100deg);
139+
}
140+
66% {
141+
transform: translate(120px, -70px) rotate(200deg);
142+
}
143+
}
144+
145+
@keyframes pulse1 {
146+
0%, 100% {
147+
opacity: 0.8;
148+
}
149+
50% {
150+
opacity: 1;
151+
}
152+
}
153+
154+
@keyframes pulse2 {
155+
0%, 100% {
156+
opacity: 0.7;
157+
}
158+
50% {
159+
opacity: 0.95;
160+
}
161+
}
162+
163+
@keyframes pulse3 {
164+
0%, 100% {
165+
opacity: 0.85;
166+
}
167+
50% {
168+
opacity: 1;
169+
}
170+
}
171+
172+
@keyframes pulse4 {
173+
0%, 100% {
174+
opacity: 0.75;
175+
}
176+
50% {
177+
opacity: 0.9;
178+
}
179+
}
180+
181+
@keyframes pulse5 {
182+
0%, 100% {
183+
opacity: 0.8;
184+
}
185+
50% {
186+
opacity: 1;
187+
}
188+
}
189+
190+
@media (prefers-reduced-motion: reduce) {
191+
* {
192+
animation-duration: 0.01ms !important;
193+
animation-iteration-count: 1 !important;
194+
transition-duration: 0.01ms !important;
195+
}
196+
}

0 commit comments

Comments
 (0)