Skip to content

Instantly share code, notes, and snippets.

@orrybaram

orrybaram/Kurz Gesagt inspired Animated Earth.markdown

Last active March 3, 2018 16:42
Show Gist options
  • Save orrybaram/43701f52e0a901aa83ee to your computer and use it in GitHub Desktop.
Save orrybaram/43701f52e0a901aa83ee to your computer and use it in GitHub Desktop.
Download ZIP
Kurz Gesagt inspired Animated Earth
Raw
index.html
<body>
<div class="earth">
<div class="earth--shadow"></div>
</div>
<div class="moon"></div>
<div class="stars"></div>
<div class="inspiration">Inspired by <a href="https://www.youtube.com/channel/UCsXVk37bltHxD1rDPwtNM8Q">Kurz Gesagt</a></div>
</body>
Raw
style.css
body {
background: #1B2B2F;
font-family: sans-serif;
}
.earth {
height: 200px;
width: 200px;
border-radius: 50%;
position: absolute;
background-color: #3380B5;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index:2;
box-shadow:
inset -30px 0 rgba(0, 0, 0, 0.2),
0 0 0 120px rgba(20, 106, 221, 0.1),
0 0 0 300px rgba(20, 106, 221, 0.1),
0 0 0 500px rgba(20, 106, 221, 0.1);
}
/* Land */
.earth:before {
content: "";
position: absolute;
background: #85C567;
height: 30px;
width: 75px;
left: 0;
top: 50px;
display:block;
border-radius: 40px;
animation: rotateLand linear 25s infinite;
box-shadow:
0px 75px 0 -5px #85C567,
5px 35px 0 -3px #85C567,
35px 125px 0 -9px #85C567,
120px -15px 0 -7px #85C567,
135px -55px 0 -9px #85C567,
150px 25px 0 7px #85C567,
220px 70px 0 -2px #85C567,
235px -35px 0 -3px #85C567,
280px 85px 0 3px #85C567,
320px 30px 0 1px #85C567,
/* Clones 400px over */
400px 0 0 0 #85C567,
400px 75px 0 -5px #85C567,
405px 35px 0 -3px #85C567,
435px 125px 0 -9px #85C567,
520px -15px 0 -7px #85C567,
535px -55px 0 -9px #85C567,
550px 25px 0 7px #85C567,
620px 70px 0 -2px #85C567,
635px -35px 0 -3px #85C567,
680px 85px 0 3px #85C567,
720px 30px 0 1px #85C567,
}
/* Clouds */
.earth:after {
content: "";
position: absolute;
background: white;
height: 20px;
width: 60px;
left: 0px;
top: 50px;
display:block;
border-radius: 40px;
animation: rotateLand linear 15s infinite;
box-shadow:
10px 50px 0 3px white,
50px -15px 0 2px white,
70px 70px 0 -1px white,
100px 25px 0 1px white,
110px 105px 0 -4px white,
140px 75px 0 -3px white,
250px -25px 0 -1px white,
210px 50px 0 1px white,
340px 130px 0 1px white,
/* Clones 400px over */
400px 0px 0 0 white,
410px 50px 0 3px white,
500px 25px 0 1px white,
450px -15px 0 2px white,
470px 70px 0 -1px white,
540px 75px 0 -3px white,
510px 105px 0 -4px white,
650px -25px 0 -1px white,
610px 50px 0 1px white,
740px 130px 0 1px white,
}
.earth--shadow {
height: 100%;
width: 100%;
border-radius: 50%;
position: absolute;
background-color: transparent;
z-index: 4;
box-shadow:
inset -30px 0 rgba(0, 0, 0, 0.1);
}
.moon {
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
background-color: #A5A5A5;
position: absolute;
top: 50%;
left: 65%;
transform: translate(-50%, -50%);
overflow: auto;
z-index:2;
box-shadow: inset -3px 0 rgba(0, 0, 0, 0.2)
}
.moon:after {
content: '';
height: 5px;
width: 5px;
border-radius:50%;
background: gray;
position: absolute;
top:8px;
left: 10px;
box-shadow:
-4px 3px 0 -1px gray,
4px 2px 0 -1px gray,
-2px -6px 0 -1px gray
}
.stars {
height: 10px;
width: 10px;
border-radius: 50%;
position: absolute;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: auto;
z-index:1;
box-shadow:
510px -450px 0 1px white,
490px -125px 0 -2px white,
150px -150px 0 -1px white,
130px 270px 0 -1px white,
480px 475px 0 -3px white,
-610px 605px 0 -4px white,
570px 750px 0 -3px white,
-550px 425px 0 1px white,
650px -105px 0 -2px white,
310px 60px 0 -1px white,
-340px 175px 0 -3px white,
-610px 1205px 0 -4px white,
500px 450px 0 -3px white,
-500px 125px 0 1px white,
-150px -615px 0 -2px white,
-110px -370px 0 -1px white,
-440px -175px 0 -3px white,
-610px -205px 0 -4px white,
410px -450px 0 -3px white,
390px -125px 0 -2px white,
50px -250px 0 -1px white,
30px -170px 0 -1px white,
380px 375px 0 -5px white,
-710px 705px 0 -6px white,
470px -650px 0 -3px white,
-450px 425px 0 1px white,
550px -205px 0 -5px white,
210px 50px 0 -1px white,
-240px 275px 0 -5px white,
-510px 120px 0 -4px white,
600px 550px 0 -3px white,
-400px 225px 0 1px white,
-250px -515px 0 -2px white,
-310px -170px 0 -4px white,
-340px -275px 0 -4px white,
-510px -305px 0 -5px white;
}
@keyframes rotateLand {
0% {transform: translate(0, 0);}
100% {transform: translate(-400px, 0);}
}
.inspiration {
position: absolute;
bottom: 10px;
right: 10px;
color: white;
font-size: 10px;
a {
color: white;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment