Categories
CSS HTML JavaScript

CSS Earth & Moon

Hello! Can you believe it’s November already? Time flies like crazy!

Do you like this image? Check more images in the store.

I am a fan of space exploration and can’t pass reading any new article about travel in space. So today I prepared the CSS Earth & Moon animation. I hope one day we can travel to the moon and back 😉

*animation opened in the Firefox browser.
*to see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
  4. Add some JavaScript

Step1.

Add HTML

<div class="container">
  <div class="earth">
    <div class="green"></div>
     </div>
  <div class="clouds">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
  </div>
  <div class="stars">
    <div class="star1">+</div>
    <div class="star2">+</div>
    <div class="star3">+</div>
  </div>
  <div id="moveMoon" class="moon"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  background-color: #000814;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
}

.container {
  position: relative;
  top:-150px;
  left:-150px;
}

Style the earth and the continents:

.earth {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #00a5cf;
  overflow: hidden;
  box-shadow: 1px 1px 150px rgba(255,255,255,0.5), inset -5px -5px 0px rgba(0,0,0,0.08);
}

.green {
  position: absolute;
  background: url("https://lenadesign.org/wp-content/uploads/2020/11/map.png") repeat 0 0;
  left:0;
  top:-70px;
  width: 640px;
  height: 480px;
  animation: spin 17s linear infinite; 
}

*to add continents you can use my image in .png format below:

Style the moon, clouds and stars:

.moon {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: #95A5A6;
  border-radius:50%;
  left:-50px;
  box-shadow: 1px 1px 70px rgba(255,255,255,0.5), inset -5px -5px 0px rgba(0,0,0,0.08);
}

.moon:before {
  position: absolute;
  background-color:rgba(0,0,0,0.09);
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.09);
  content:"";
  width:25px;
  height:25px;
  border-radius:50%;
  top:10px;
  left:10px;
}

.moon:after {
  position: absolute;
  background-color:rgba(0,0,0,0.09);
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.09);
  content:"";
  width:15px;
  height:15px;
  border-radius:50%;
  top:40px;
  left:40px;
}

.clouds {
  position: absolute;
}

.cloud1 {
  position: absolute;
  width: 150px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  top:200px;
  left:-50px;
  filter: blur(8px);
  box-shadow: -5px 5px 4px;
}

.cloud2 {
  position: absolute;
  width: 150px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  top:100px;
  left:190px;
  filter: blur(8px);
  box-shadow: 5px -5px 4px;
}

.stars {
  position: absolute;
  color: rgba(255,255,255,0.7);
  font-weight: bold;
  font-size: 25px;
  text-shadow: 1px 1px 20px white;
  
}

.star1 {
  position: absolute;
  left: 300px;  
  animation: flash 1s ease infinite alternate;
}

.star1:before {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:-80px;
  top:-50px;
  
}

.star1:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:-180px;
  top:340px;
}

.star2 {
  position: absolute;
  left: -70px;  
  top:100px;
  animation: flash 1.5s ease infinite alternate;
}

.star2:before {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:80px;
  top:170px;
}

.star2:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:390px;
  top:40px;
}

.star3 {
  position: absolute;
  top:270px;
  left:310px;
  animation: flash .7s ease infinite alternate;
}

.star3:before {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:-270px;
  top:-270px;
}

.star3:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:-390px;
  top:-70px;
}

Step3.

Add CSS Animation

To move continents:

@keyframes spin {  
  from { background-position: 0 0; }
    to { background-position: -600px 0; }
}

To flash stars:

@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}

Step4.

Add JavaScript

To move moon around the earth:

var ElementRevolver = (function() {
    
    function getPosition(settings, ellapsedTime) {
        var angle = getAngle(settings, ellapsedTime);
        return {
            x: Math.round(settings.center.x + settings.radius * Math.cos(angle)),
            y: Math.round(settings.center.y + settings.radius * Math.sin(angle))
        };
    }
    
    function getAngle(settings, ellapsedTime) {
        return ellapsedTime / settings.interval * 2 * Math.PI * settings.direction - settings.startPositionRad;
    }
    
    function start(id, settings) {
        var el = document.getElementById(id),
            startTime = (new Date()).getTime(),
            width = el.offsetWidth,
            height = el.offsetHeight;
        if(el['#rev:tm'] !== null) stop(id);
        el.style.position = settings.cssPosition || 'absolute';
        if(!settings.startPositionRad) settings.startPositionRad = settings.startPositionDeg / 180 * Math.PI;
        el['#rev:tm'] = setInterval(function() {
            var pos = getPosition(settings, (new Date()).getTime() - startTime);
            el.style.left = (pos.x - Math.round(width / 2)) + 'px';
            el.style.top = (pos.y - Math.round(height / 2)) + 'px';
        }, settings.updateInterval);
        if(settings.iterations > -1) setTimeout(function() {
            stop(id);
        }, settings.iterations * settings.interval);
    }
    
    function stop(id) {
        var el = document.getElementById(id);
        if(el['#rev:tm'] === null) return;
        clearInterval(el['#rev:tm']);
        el['#rev:tm'] = null;
    }
    
    return {
        start: start,
        stop: stop
    };
    
})();

ElementRevolver.start('moveMoon', {
    radius: 200,
    center: { x: 150, y: 150 },
    interval: 8000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 0,  
    updateInterval: 50
});

To see the live output of the animation go to lenastanley.com.

Enjoy coding!