Merge pull request #708 from yaxit24/patch-7

Update index.html
you-dont-need · Nov 5, 2024 · 2584b48 · 2584b48
2 parents 0501658 + b529cf2
commit 2584b48
Showing 1 changed file with 24 additions and 14 deletions.
diff --git a/3D Earth/index.html b/3D Earth/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Correct 3D Animated Spherical Earth</title>
+    <title>Animated 3D Earth</title>
     <style>
         body {
             margin: 0;
@@ -31,7 +31,8 @@
             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: 200%;
+            background-size: cover;
+            overflow: hidden;
         }
 
         .globe::before {
@@ -42,33 +43,42 @@
             width: 100%;
             height: 100%;
             border-radius: 50%;
-            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.4) 80%);
+            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;
         }
 
-        .hemisphere {
+        .globe::after {
+            content: '';
             position: absolute;
             width: 100%;
             height: 100%;
             border-radius: 50%;
-            overflow: hidden;
-            transform-style: preserve-3d;
+            background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.1), rgba(0,0,0,0.6));
+            mix-blend-mode: overlay;
+            opacity: 0.5;
+            animation: shadowMovement 20s linear infinite;
         }
 
-        .front { transform: translateZ(1px); }
-        .back { transform: rotateY(180deg) translateZ(1px); }
-
         @keyframes rotate {
             0% { transform: rotateY(0deg); }
             100% { transform: rotateY(360deg); }
         }
+
+        @keyframes dayNightCycle {
+            0% { background-position: 0 0; }
+            100% { background-position: 100% 100%; }
+        }
+
+        @keyframes shadowMovement {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body>
     <div class="scene">
-        <div class="globe">
-            <div class="hemisphere front"></div>
-            <div class="hemisphere back"></div>
-        </div>
+        <div class="globe"></div>
     </div>
 </body>
-</html>
+</html>
+