diff --git a/3D Earth/index.html b/3D Earth/index.html
index 353da9e6..ccbdd8ec 100644
--- a/3D Earth/index.html
+++ b/3D Earth/index.html
@@ -20,8 +20,6 @@
width: 300px;
height: 300px;
position: relative;
- transform-style: preserve-3d;
- animation: rotate 20s linear infinite;
}
.globe {
@@ -31,37 +29,26 @@
position: absolute;
transform-style: preserve-3d;
background: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57735/land_ocean_ice_cloud_2048.jpg');
- background-size: cover;
- overflow: hidden;
- }
-
- .globe::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.6) 70%);
- animation: dayNightCycle 20s linear infinite;
+ background-size: 200% 150%;
+ animation: spin 20s linear infinite;
+ box-shadow:
+ inset 30px 0 80px rgba(0, 0, 0, 0.8),
+ inset -30px 0 40px rgba(255, 255, 255, 0.2),
+ 0 0 40px rgba(168, 219, 255, 0.4);
}
.globe::after {
- content: '';
+ content: "";
position: absolute;
- width: 100%;
- height: 100%;
+ inset: 0;
border-radius: 50%;
- background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.1), rgba(0,0,0,0.6));
+ background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), rgba(0,0,0,0.7) 70%);
mix-blend-mode: overlay;
- opacity: 0.5;
- animation: shadowMovement 20s linear infinite;
}
- @keyframes rotate {
- 0% { transform: rotateY(0deg); }
- 100% { transform: rotateY(360deg); }
+ @keyframes spin {
+ 0% { background-position: 0 0; }
+ 100% { background-position: -200% 0; }
}
@keyframes dayNightCycle {