Skip to content

Commit d9b4558

Browse files
lenadgitlenadgit
committed
added a new project Spheres
1 parent 52d47a4 commit d9b4558

File tree

2 files changed

+214
-0
lines changed

2 files changed

+214
-0
lines changed

‎spheres/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<link href="style.css" rel="stylesheet">
8+
<title>3D Spheres</title>
9+
</head>
10+
<body>
11+
<figure class="circle"></figure>
12+
<section class="stage">
13+
<figure class="ball2"></span></figure>
14+
</section>
15+
<section class="stage">
16+
<figure class="ball"><span class="shadow"></span></figure>
17+
</section>
18+
<section class="stage">
19+
<figure class="ball">
20+
<span class="shadow"></span>
21+
<span class="eight"></span>
22+
</figure>
23+
</section>
24+
<section class="stage">
25+
<figure class="ball">
26+
<span class="shadow"></span>
27+
<span class="iris"></span>
28+
</figure>
29+
</section>
30+
</body>
31+
</html>

‎spheres/style.css‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
.circle {
2+
display: inline-block;
3+
background: black;
4+
border-radius: 50%;
5+
height: 300px;
6+
width: 300px;
7+
margin: 0;
8+
background: radial-gradient(circle at 100px 100px, #5cabff, #000);
9+
}
10+
11+
.stage {
12+
width: 300px;
13+
height: 300px;
14+
display: inline-block;
15+
margin: 20px;
16+
perspective: 1200px;
17+
perspective-origin: 50% 50%;
18+
}
19+
.ball .shadow {
20+
position: absolute;
21+
width: 100%;
22+
height: 100%;
23+
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
24+
transform: rotateX(90deg) translateZ(-150px);
25+
z-index: -1;
26+
27+
}
28+
29+
.ball2 {
30+
display: inline-block;
31+
width: 100%;
32+
height: 100%;
33+
margin: 0;
34+
border-radius: 50%;
35+
position: relative;
36+
animation: bubble-anim 5s ease-out infinite;
37+
background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
38+
}
39+
.ball2:before {
40+
content: "";
41+
position: absolute;
42+
top: 1%;
43+
left: 5%;
44+
width: 90%;
45+
height: 90%;
46+
border-radius: 50%;
47+
background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
48+
filter: blur(5px);
49+
z-index: 2;
50+
}
51+
52+
.ball {
53+
display: inline-block;
54+
width: 100%;
55+
height: 100%;
56+
margin: 0;
57+
border-radius: 50%;
58+
position: relative;
59+
background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);
60+
}
61+
.ball:before {
62+
content: "";
63+
position: absolute;
64+
background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
65+
border-radius: 50%;
66+
bottom: 2.5%;
67+
left: 5%;
68+
opacity: 0.6;
69+
height: 100%;
70+
width: 90%;
71+
filter: blur(5px);
72+
z-index: 2;
73+
}
74+
.ball:after {
75+
content: "";
76+
width: 100%;
77+
height: 100%;
78+
position: absolute;
79+
top: 5%;
80+
left: 10%;
81+
border-radius: 50%;
82+
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
83+
transform: translateX(-80px) translateY(-90px) skewX(-20deg);
84+
filter: blur(10px);
85+
}
86+
87+
.ball .eight {
88+
width: 110px;
89+
height: 110px;
90+
margin: 30%;
91+
background: white;
92+
border-radius: 50%;
93+
transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
94+
position: absolute;
95+
}
96+
.ball .eight:before {
97+
content: "8";
98+
display: block;
99+
position: absolute;
100+
text-align: center;
101+
height: 80px;
102+
width: 100px;
103+
left: 50px;
104+
margin-left: -40px;
105+
top: 44px;
106+
margin-top: -40px;
107+
color: black;
108+
font-family: Arial;
109+
font-size: 90px;
110+
line-height: 104px;
111+
}
112+
113+
.iris {
114+
width: 40%;
115+
height: 40%;
116+
margin: 30%;
117+
border-radius: 50%;
118+
background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
119+
transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
120+
position: absolute;
121+
animation: move-eye-skew 5s ease-out infinite;
122+
}
123+
.iris:before {
124+
content: "";
125+
display: block;
126+
position: absolute;
127+
width: 37.5%;
128+
height: 37.5%;
129+
border-radius: 50%;
130+
top: 31.25%;
131+
left: 31.25%;
132+
background: black;
133+
}
134+
.iris:after {
135+
content: "";
136+
display: block;
137+
position: absolute;
138+
width: 31.25%;
139+
height: 31.25%;
140+
border-radius: 50%;
141+
top: 18.75%;
142+
left: 18.75%;
143+
background: rgba(255, 255, 255, 0.2);
144+
}
145+
146+
@keyframes move-eye-skew {
147+
0% {
148+
transform: none;
149+
}
150+
20% {
151+
transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
152+
}
153+
25%, 44% {
154+
transform: none;
155+
}
156+
50%, 60% {
157+
transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
158+
}
159+
66%, 100% {
160+
transform: none;
161+
}
162+
}
163+
164+
@keyframes bubble-anim {
165+
0% {
166+
transform: scale(1);
167+
}
168+
20% {
169+
transform: scaleY(0.95) scaleX(1.05);
170+
}
171+
48% {
172+
transform: scaleY(1.1) scaleX(0.9);
173+
}
174+
68% {
175+
transform: scaleY(0.98) scaleX(1.02);
176+
}
177+
80% {
178+
transform: scaleY(1.02) scaleX(0.98);
179+
}
180+
97%, 100% {
181+
transform: scale(1);
182+
}
183+
}

0 commit comments

Comments
 (0)