octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
               <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>
            
          
!
            
              @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;
 }

}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console