Skip to content

Commit 34085e6

Browse files
aayush105aayush105
authored
Merge pull request #722 from AryanVBW/master
ADD CSS Animation Oasis: A Collection of 10 Hypnotic and Interactive Visuals
2 parents 6f7843c + 255b0b4 commit 34085e6

9 files changed

+726
-0
lines changed

‎Top 10/3D Rotating Cube.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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>3D Rotating Cube</title>
7+
<style>
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
background-color: #f0f0f0;
14+
margin: 0;
15+
}
16+
.scene {
17+
width: 200px;
18+
height: 200px;
19+
perspective: 600px;
20+
}
21+
.cube {
22+
width: 100%;
23+
height: 100%;
24+
position: relative;
25+
transform-style: preserve-3d;
26+
transform: rotateX(-30deg) rotateY(-45deg);
27+
animation: rotate 10s infinite linear;
28+
}
29+
.cube div {
30+
position: absolute;
31+
width: 200px;
32+
height: 200px;
33+
background: rgba(255, 255, 255, 0.7);
34+
border: 1px solid rgba(0, 0, 0, 0.1);
35+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
36+
}
37+
.front { transform: translateZ(100px); }
38+
.back { transform: rotateY(180deg) translateZ(100px); }
39+
.right { transform: rotateY(90deg) translateZ(100px); }
40+
.left { transform: rotateY(-90deg) translateZ(100px); }
41+
.top { transform: rotateX(90deg) translateZ(100px); }
42+
.bottom { transform: rotateX(-90deg) translateZ(100px); }
43+
44+
@keyframes rotate {
45+
from { transform: rotateX(-30deg) rotateY(-45deg); }
46+
to { transform: rotateX(-30deg) rotateY(315deg); }
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
<div class="scene">
52+
<div class="cube">
53+
<div class="front"></div>
54+
<div class="back"></div>
55+
<div class="right"></div>
56+
<div class="left"></div>
57+
<div class="top"></div>
58+
<div class="bottom"></div>
59+
</div>
60+
</div>
61+
</body>
62+
</html>

‎Top 10/Glowing Orb with Rotating Rings.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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>Glowing Orb with Rotating Rings</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
overflow: hidden;
11+
background: black;
12+
}
13+
.container {
14+
position: absolute;
15+
top: 50%;
16+
left: 50%;
17+
transform: translate(-50%, -50%);
18+
width: 200px;
19+
height: 200px;
20+
}
21+
.orb {
22+
position: absolute;
23+
top: 50%;
24+
left: 50%;
25+
width: 50px;
26+
height: 50px;
27+
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
28+
border-radius: 50%;
29+
transform: translate(-50%, -50%);
30+
animation: glow 2s infinite alternate;
31+
}
32+
.ring {
33+
position: absolute;
34+
top: 50%;
35+
left: 50%;
36+
width: 100%;
37+
height: 100%;
38+
border: 1px solid rgba(255, 255, 255, 0.5);
39+
border-radius: 50%;
40+
transform: translate(-50%, -50%);
41+
animation: rotate 10s linear infinite;
42+
}
43+
.ring:nth-child(2) {
44+
width: 150%;
45+
height: 150%;
46+
animation-duration: 15s;
47+
}
48+
.ring:nth-child(3) {
49+
width: 200%;
50+
height: 200%;
51+
animation-duration: 20s;
52+
}
53+
@keyframes glow {
54+
from {
55+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
56+
}
57+
to {
58+
box-shadow: 0 0 20px rgba(255, 255, 255, 1);
59+
}
60+
}
61+
@keyframes rotate {
62+
from {
63+
transform: translate(-50%, -50%) rotate(0deg);
64+
}
65+
to {
66+
transform: translate(-50%, -50%) rotate(360deg);
67+
}
68+
}
69+
.stars {
70+
position: absolute;
71+
width: 100%;
72+
height: 100%;
73+
background: transparent;
74+
overflow: hidden;
75+
}
76+
.stars::before {
77+
content: '';
78+
position: absolute;
79+
top: 0;
80+
left: 0;
81+
width: 200%;
82+
height: 200%;
83+
background: transparent;
84+
box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.5);
85+
animation: twinkle 2s infinite alternate;
86+
}
87+
@keyframes twinkle {
88+
from {
89+
opacity: 0.5;
90+
}
91+
to {
92+
opacity: 1;
93+
}
94+
}
95+
</style>
96+
</head>
97+
<body>
98+
<div class="stars"></div>
99+
<div class="container">
100+
<div class="orb"></div>
101+
<div class="ring"></div>
102+
<div class="ring"></div>
103+
<div class="ring"></div>
104+
</div>
105+
</body>
106+
</html>

‎Top 10/Neon Cube Animation.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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>Neon Cube Animation</title>
7+
<style>
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
background-color: #000;
14+
margin: 0;
15+
overflow: hidden;
16+
}
17+
18+
.cube {
19+
position: relative;
20+
width: 200px;
21+
transform-style: preserve-3d;
22+
animation: rotate 10s infinite linear;
23+
}
24+
25+
.cube div {
26+
position: absolute;
27+
width: 200px;
28+
height: 200px;
29+
background: rgba(0, 0, 0, 0.1);
30+
border: 2px solid;
31+
border-image: linear-gradient(45deg, #ff00ff, #00ffff) 1;
32+
box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.5);
33+
}
34+
35+
.cube .front { transform: translateZ(100px); }
36+
.cube .back { transform: rotateY(180deg) translateZ(100px); }
37+
.cube .right { transform: rotateY(90deg) translateZ(100px); }
38+
.cube .left { transform: rotateY(-90deg) translateZ(100px); }
39+
.cube .top { transform: rotateX(90deg) translateZ(100px); }
40+
.cube .bottom { transform: rotateX(-90deg) translateZ(100px); }
41+
42+
@keyframes rotate {
43+
from { transform: rotateX(0deg) rotateY(0deg); }
44+
to { transform: rotateX(360deg) rotateY(360deg); }
45+
}
46+
</style>
47+
</head>
48+
<body>
49+
<div class="cube">
50+
<div class="front"></div>
51+
<div class="back"></div>
52+
<div class="right"></div>
53+
<div class="left"></div>
54+
<div class="top"></div>
55+
<div class="bottom"></div>
56+
</div>
57+
</body>
58+
</html>

‎Top 10/Neon Wireframe Cube.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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>Neon Wireframe Cube</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
background: #000;
15+
overflow: hidden;
16+
}
17+
.cube {
18+
position: relative;
19+
width: 200px;
20+
transform-style: preserve-3d;
21+
animation: rotate 10s infinite linear;
22+
}
23+
.cube div {
24+
position: absolute;
25+
width: 200px;
26+
height: 200px;
27+
background: rgba(255, 255, 255, 0.1);
28+
border: 2px solid;
29+
border-image: linear-gradient(45deg, #ff00ff, #00ffff) 1;
30+
box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.5);
31+
}
32+
.cube .front { transform: translateZ(100px); }
33+
.cube .back { transform: rotateY(180deg) translateZ(100px); }
34+
.cube .right { transform: rotateY(90deg) translateZ(100px); }
35+
.cube .left { transform: rotateY(-90deg) translateZ(100px); }
36+
.cube .top { transform: rotateX(90deg) translateZ(100px); }
37+
.cube .bottom { transform: rotateX(-90deg) translateZ(100px); }
38+
39+
@keyframes rotate {
40+
from { transform: rotateX(0deg) rotateY(0deg); }
41+
to { transform: rotateX(360deg) rotateY(360deg); }
42+
}
43+
</style>
44+
</head>
45+
<body>
46+
<div class="cube">
47+
<div class="front"></div>
48+
<div class="back"></div>
49+
<div class="right"></div>
50+
<div class="left"></div>
51+
<div class="top"></div>
52+
<div class="bottom"></div>
53+
</div>
54+
</body>
55+
</html>

‎Top 10/Ripple Animation.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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>Ripple Animation</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
background-color: #000;
15+
overflow: hidden;
16+
}
17+
.ripple {
18+
position: absolute;
19+
border-radius: 50%;
20+
background: radial-gradient(circle, rgba(255,255,255,0.5), rgba(255,255,255,0));
21+
animation: ripple-animation 2s infinite;
22+
}
23+
@keyframes ripple-animation {
24+
0% {
25+
width: 0;
26+
height: 0;
27+
opacity: 1;
28+
}
29+
100% {
30+
width: 500px;
31+
height: 500px;
32+
opacity: 0;
33+
}
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div class="ripple"></div>
39+
<div class="ripple"></div>
40+
<div class="ripple"></div>
41+
<div class="ripple"></div>
42+
<div class="ripple"></div>
43+
44+
<script>
45+
const colors = ['#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF3'];
46+
const ripples = document.querySelectorAll('.ripple');
47+
48+
ripples.forEach((ripple, index) => {
49+
ripple.style.animationDelay = `${index * 0.4}s`;
50+
ripple.style.background = `radial-gradient(circle, ${colors[index % colors.length]}, rgba(255,255,255,0))`;
51+
});
52+
</script>
53+
</body>
54+
</html>

‎Top 10/Text Reflection.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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>Text Reflection</title>
7+
<style>
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
background-color: #f0f0f0;
14+
margin: 0;
15+
}
16+
.reflection {
17+
font-size: 3em;
18+
position: relative;
19+
color: #000;
20+
}
21+
.reflection::after {
22+
content: attr(data-text);
23+
position: absolute;
24+
top: 100%;
25+
left: 0;
26+
right: 0;
27+
color: rgba(0, 0, 0, 0.3);
28+
transform: scaleY(-1);
29+
transform-origin: top;
30+
opacity: 0.5;
31+
filter: blur(1px);
32+
animation: wave 5s infinite;
33+
}
34+
.reflection:hover::after {
35+
animation: wave 1s infinite;
36+
}
37+
@keyframes wave {
38+
0%, 100% {
39+
transform: scaleY(-1) translateY(0);
40+
}
41+
50% {
42+
transform: scaleY(-1) translateY(5px);
43+
}
44+
}
45+
</style>
46+
</head>
47+
<body>
48+
<div class="reflection" data-text="Mirrored Text">Mirrored Text</div>
49+
</body>
50+
</html>

0 commit comments

Comments
 (0)