Skip to content

Commit fbf9df8

Browse files
aayush105aayush105
authored
Merge pull request #829 from nitinyadav2188/EARTH
Added The Working model of EARTH
2 parents 2f41f64 + ce24140 commit fbf9df8

4 files changed

Lines changed: 127 additions & 0 deletions

File tree

‎EARTH/earth.mp4‎

2.15 MB
Binary file not shown.

‎EARTH/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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>EARTH</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="earth absolute right-0 bottom-[10rem] size-[60rem] rounded-[50%]
11+
before:absolute before:top-[6rem] before:left-[7rem] before:w-[14%] before:h-[1rem] before:rounded-[45%] before:blur-[1.2rem]
12+
after:absolute after:top-[0rem] after:left-[33rem] after:w-[7%] after:h-[1rem] after:rounded-[45%] after:blur-[1.2rem]"></div>
13+
</body>
14+
</html>

‎EARTH/style.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
body {
7+
width: 100%;
8+
height: 100vh;
9+
display: grid;
10+
place-items: center;
11+
background: #081621;
12+
}
13+
14+
@property --pulse {
15+
syntax: '<length>';
16+
inherits: false;
17+
initial-value: 80px;
18+
}
19+
20+
@property --pulse2 {
21+
syntax: '<length>';
22+
inherits: false;
23+
initial-value: 56px;
24+
}
25+
26+
@property --r {
27+
syntax: '<angle>';
28+
inherits: false;
29+
initial-value: 0deg;
30+
}
31+
img {
32+
background: red;
33+
width: 100px;
34+
height: 100px;
35+
}
36+
.earth {
37+
position: relative;
38+
width: 600px;
39+
aspect-ratio: 1;
40+
border-radius: 50%;
41+
background-image: url('https://i.postimg.cc/9QCCCVsQ/earth.png');
42+
background-repeat: repeat-x;
43+
background-size: cover;
44+
animation: earth 40s linear infinite, pulse 2s linear infinite alternate-reverse;
45+
box-shadow: 0 -1px 1px 1px white,
46+
-1px 1px 1px 1px #64BEC8,
47+
0 0 var(--pulse) -20px #64BEC8,
48+
inset 0 0 76px -10px #64BEC8,
49+
inset 0 0 var(--pulse2) -10px #64BEC8;
50+
&:before,
51+
&:after {
52+
content: '';
53+
position: absolute;
54+
left: 70px;
55+
height: 10px;
56+
border-radius: 45%;
57+
filter: blur(12px);
58+
transform: rotate(var(--r));
59+
animation: rotation 10s linear infinite;
60+
}
61+
&:before {
62+
width: 14%;
63+
64+
box-shadow: inset 0 0 70px 90px #A47478,
65+
0 0 140px 70px #A47478;
66+
}
67+
&:after {
68+
width: 7%;
69+
height: 10px;
70+
box-shadow: inset 0 0 70px -50px white,
71+
inset 0 0 70px 90px #E5BC77,
72+
0 0 130px 50px #E5BC77;
73+
}
74+
}
75+
76+
@keyframes earth {
77+
0% {
78+
background-position: 0 0;
79+
}
80+
100% {
81+
background-position: -199% 0;
82+
}
83+
}
84+
85+
@keyframes pulse {
86+
0% {
87+
--pulse: 8rem;
88+
--pulse2: 5.6rem;
89+
--r: 0deg;
90+
91+
}
92+
100% {
93+
--pulse: 10rem;
94+
--pulse2: 3.6rem;
95+
--r: 180deg;
96+
}
97+
}
98+
99+
@keyframes rotation {
100+
from {
101+
--r: 0deg;
102+
}
103+
to {
104+
--r: 180deg;
105+
}
106+
}

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
5151
- [Dog Box Animation](#dog-box-animation)
5252
- [Dropdown Menu](#dropdown-menu)
5353
- [Dynamic Image Colorizing](#dynamic-image-colorizing)
54+
- [Earth](#earth)
5455
- [Enable Dark Mode](#darkmode)
5556
- [Fancy Menu](#fancy-menu)
5657
- [Flip the grid](#flip-grid)
@@ -122,6 +123,12 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
122123

123124
---
124125

126+
## <a id="earth"></a>EARTH
127+
128+
[EARTH](/You-Dont-Need-JavaScript/EARTH/earth.mp4)
129+
130+
**[⬆ back to top](#quick-links)**
131+
125132
## <a id="image-hover-effect"></a>Image Hover Effect
126133

127134
[<img src="Image-Hover-Effect\image.png" height="230" title="Image Hover Effect" alt="Image-Hover-Effect">](http://url-to-page)

0 commit comments

Comments
 (0)