Skip to content

Instantly share code, notes, and snippets.

@ursuleacv

ursuleacv/index.html

Created November 20, 2012 20:19
Show Gist options
  • Save ursuleacv/4120769 to your computer and use it in GitHub Desktop.
Save ursuleacv/4120769 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by mutukrish. earth and moon animation using css3
Raw
index.html
<div id="moon_holder">
<div id="moon_back"></div>
<img src="http://lab.legomushroom.com/___img/moon2.png" id="moon">
<div id="moon_ball"></div>
</div>
<div id="center" align="center">
<div id="earth_holder">
<div id="earth_ball"></div>
<div id="earth_glow"></div>
<div id="earth"></div>
</div>
</div>
Raw
style.css
@keyframes "rotate_earth" {
0% {
background-position: 0px -2px;
}
50% {
background-position: 205px -2px;
}
100% {
background-position: 410px -2px;
}
}
@-moz-keyframes rotate_earth {
0% {
background-position: 0px -2px;
}
50% {
background-position: 205px -2px;
}
100% {
background-position: 410px -2px;
}
}
@-webkit-keyframes "rotate_earth" {
0% {
background-position: 0px -2px;
}
50% {
background-position: 205px -2px;
}
100% {
background-position: 410px -2px;
}
}
@-ms-keyframes "rotate_earth" {
0% {
background-position: 0px -2px;
}
50% {
background-position: 205px -2px;
}
100% {
background-position: 410px -2px;
}
}
@-o-keyframes "rotate_earth" {
0% {
background-position: 0px -2px;
}
50% {
background-position: 205px -2px;
}
100% {
background-position: 410px -2px;
}
}
body {
background: #fff url("http://lab.legomushroom.com/___img/sky_star2.jpg") 0px 0px;
-ms-overflow-x: hidden;
overflow-x: hidden;
margin: 0;
-webkit-animation: sky 80s linear infinite;
-moz-animation: sky 80s linear infinite;
-ms-animation: sky 80s linear infinite;
-o-animation: sky 80s linear infinite;
animation: sky 80s linear infinite;
}
body div#moon_holder {
position: absolute;
left: -30%;
bottom: 60px;
z-index: 6;
-webkit-animation: launch_moon 240s linear infinite;
-moz-animation: launch_moon 240s linear infinite;
-ms-animation: launch_moon 240s linear infinite;
-o-animation: launch_moon 240s linear infinite;
animation: launch_moon 240s linear infinite;
}
body div#moon_holder img#moon {
width: 90px;
height: 90px;
border-radius: 90px;
position: absolute;
z-index: 0;
-webkit-animation: launch_moon_size 60s linear infinite;
-moz-animation: launch_moon_size 60s linear infinite;
-ms-animation: launch_moon_size 60s linear infinite;
-o-animation: launch_moon_size 60s linear infinite;
animation: launch_moon_size 60s linear infinite;
-webkit-box-shadow: -400px -30px 20px rgba(0,0,0,0.50);
box-shadow: -400px -30px 20px rgba(0,0,0,0.50);
}
body div#moon_holder div#moon_ball {
z-index: 1;
position: absolute;
width: 90px;
height: 90px;
border-radius: 90px;
margin: 1px 1px 0px 0px;
-webkit-box-shadow: inset 20px -10px 37px #000, inset 0 0 27px #000;
-moz-box-shadow: inset 20px -10px 37px #000, inset 0 0 27px #000;
box-shadow: inset 20px -10px 37px #000, inset 0 0 27px #000;
-webkit-animation: launch_moon_ball_size 240s linear infinite;
-moz-animation: launch_moon_ball_size 240s linear infinite;
-ms-animation: launch_moon_ball_size 240s linear infinite;
-o-animation: launch_moon_ball_size 240s linear infinite;
animation: launch_moon_ball_size 240s linear infinite;
}
body div#moon_holder div#moon_back {
width: 90px;
height: 90px;
border-radius: 90px;
position: absolute;
z-index: 0;
background-color: #000;
-webkit-animation: launch_moon_ball_size 240s linear infinite;
-moz-animation: launch_moon_ball_size 240s linear infinite;
-ms-animation: launch_moon_ball_size 240s linear infinite;
-o-animation: launch_moon_ball_size 240s linear infinite;
animation: launch_moon_ball_size 240s linear infinite;
}
body div#earth_holder {
position: static;
z-index: 1;
width: 200px;
height: 200px;
border-radius: 200px;
margin-top: 11%;
}
body div#earth_holder div#earth {
z-index: 2;
position: absolute;
width: 200px;
height: 200px;
border-radius: 200px;
background: url("http://lab.legomushroom.com/___img/11.jpg") 0px 0px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
-moz-box-shadow: inset 1px -3px 14px rgba(0,0,0,0.60), inset 0 0 67px #000, inset 0 0 20px rgba(0,0,0,0.50), -400px -30px 130px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 1px -3px 14px rgba(0,0,0,0.60), inset 0 0 67px #000, inset 0 0 20px rgba(0,0,0,0.50), -400px -30px 130px rgba(0,0,0,0.50);
box-shadow: inset 1px -3px 14px rgba(0,0,0,0.60), inset 0 0 67px #000, inset 0 0 20px rgba(0,0,0,0.50), -400px -30px 130px rgba(0,0,0,0.50);
-webkit-animation: rotate_earth 40s linear infinite;
-moz-animation: rotate_earth 40s linear infinite;
-ms-animation: rotate_earth 40s linear infinite;
-o-animation: rotate_earth 40s linear infinite;
animation: rotate_earth 40s linear infinite;
}
body div#earth_holder div#earth_glow {
z-index: 4;
-webkit-box-shadow: 0 0px 19px rgba(79,156,201,0.80);
box-shadow: 0 0px 19px rgba(79,156,201,0.80);
position: absolute;
width: 200px;
height: 200px;
border-radius: 200px;
}
body div#earth_holder div#earth_ball {
z-index: 3;
position: absolute;
width: 200px;
height: 200px;
border-radius: 200px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=74)";
filter: alpha(opacity=74);
opacity: 0.74;
-webkit-box-shadow: inset 40px -40px 80px #000, inset 20px -20px 100px #000;
box-shadow: inset 40px -40px 80px #000, inset 20px -20px 100px #000;
}
@keyframes "launch_moon" {
25% {
z-index: 6;
}
50% {
left: 140%;
bottom: 600px;
z-index: 0;
}
55% {
bottom: 680px;
}
75% {
z-index: 0;
}
100% {
left: -30%;
z-index: 6;
bottom: 100px;
}
}
@-moz-keyframes launch_moon {
25% {
z-index:6;
}
50% {
left: 140%;
bottom: 600px;
z-index: 0;
}
55% {
bottom: 680px;
}
75% {
z-index: 0;
}
100% {
left: -30%;
z-index: 6;
bottom: 100px;
}
}
@-webkit-keyframes "launch_moon" {
25% {
z-index: 6;
}
50% {
left: 140%;
bottom: 600px;
z-index: 0;
}
55% {
bottom: 680px;
}
75% {
z-index: 0;
}
100% {
left: -30%;
z-index: 6;
bottom: 100px;
}
}
@-ms-keyframes "launch_moon" {
25% {
z-index: 6;
}
50% {
left: 140%;
bottom: 600px;
z-index: 0;
}
55% {
bottom: 680px;
}
75% {
z-index: 0;
}
100% {
left: -30%;
z-index: 6;
bottom: 100px;
}
}
@-o-keyframes "launch_moon" {
25% {
z-index: 6;
}
50% {
left: 140%;
bottom: 600px;
z-index: 0;
}
55% {
bottom: 680px;
}
75% {
z-index: 0;
}
100% {
left: -30%;
z-index: 6;
bottom: 100px;
}
}
@keyframes "launch_moon_size" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
50% {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
55% {
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.8, 0.8);
-o-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
75% {
-webkit-transform: scale(0.7, 0.7);
-moz-transform: scale(0.7, 0.7);
-o-transform: scale(0.7, 0.7);
-ms-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
filter: alpha(opacity=35);
opacity: 0.35;
}
100% {
-webkit-transform: scale(0.9, 0.9);
-moz-transform: scale(0.9, 0.9);
-o-transform: scale(0.9, 0.9);
-ms-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
}
@-moz-keyframes launch_moon_size {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
50% {
-moz-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
filter: alpha(opacity=100);
opacity: 1;
}
55% {
-moz-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
filter: alpha(opacity=70);
opacity: 0.7;
}
75% {
-moz-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
filter: alpha(opacity=35);
opacity: 0.35;
}
100% {
-moz-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
filter: alpha(opacity=70);
opacity: 0.7;
}
}
@-webkit-keyframes "launch_moon_size" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
filter: alpha(opacity=100);
opacity: 1;
}
55% {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
filter: alpha(opacity=70);
opacity: 0.7;
}
75% {
-webkit-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
filter: alpha(opacity=35);
opacity: 0.35;
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
filter: alpha(opacity=70);
opacity: 0.7;
}
}
@-ms-keyframes "launch_moon_size" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
50% {
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
55% {
-ms-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
75% {
-ms-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
filter: alpha(opacity=35);
opacity: 0.35;
}
100% {
-ms-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
}
@-o-keyframes "launch_moon_size" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
50% {
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
filter: alpha(opacity=100);
opacity: 1;
}
55% {
-o-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
filter: alpha(opacity=70);
opacity: 0.7;
}
75% {
-o-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
filter: alpha(opacity=35);
opacity: 0.35;
}
100% {
-o-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
filter: alpha(opacity=70);
opacity: 0.7;
}
}
@keyframes "launch_moon_ball_size" {
50% {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
55% {
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.8, 0.8);
-o-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
75% {
-webkit-transform: scale(0.7, 0.7);
-moz-transform: scale(0.7, 0.7);
-o-transform: scale(0.7, 0.7);
-ms-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
}
100% {
-webkit-transform: scale(0.9, 0.9);
-moz-transform: scale(0.9, 0.9);
-o-transform: scale(0.9, 0.9);
-ms-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
}
@-moz-keyframes launch_moon_ball_size {
50% {
-moz-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
55% {
-moz-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
75% {
-moz-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
}
100% {
-moz-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
}
@-webkit-keyframes "launch_moon_ball_size" {
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
55% {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
75% {
-webkit-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
}
@-ms-keyframes "launch_moon_ball_size" {
50% {
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
55% {
-ms-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
75% {
-ms-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
}
100% {
-ms-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
}
@-o-keyframes "launch_moon_ball_size" {
50% {
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
55% {
-o-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
75% {
-o-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
}
100% {
-o-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
}
@keyframes "sky" {
50% {
background-position: 318px 212px;
}
100% {
background-position: 635px 423px;
}
}
@-moz-keyframes sky {
50% {
background-position: 318px 212px;
}
100% {
background-position: 635px 423px;
}
}
@-webkit-keyframes "sky" {
50% {
background-position: 318px 212px;
}
100% {
background-position: 635px 423px;
}
}
@-ms-keyframes "sky" {
50% {
background-position: 318px 212px;
}
100% {
background-position: 635px 423px;
}
}
@-o-keyframes "sky" {
50% {
background-position: 318px 212px;
}
100% {
background-position: 635px 423px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment