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 {